Added KB icon modifiers to categories and answers in editor mode.

This commit is contained in:
Mantas Masalskis 2019-06-06 03:23:45 +02:00 committed by Martin Edenhofer
parent 0244ac9a87
commit 97e3d0b4f0
25 changed files with 235 additions and 77 deletions

View file

@ -13,6 +13,7 @@ class App.KnowledgeBaseSearchItem extends App.Controller
data: ->
output = @details || {}
output['url'] = @object?.uiUrl("search-return/#{@pathSuffix}") || '#'
output['state'] = @object.parent().attributesForRendering(App.KnowledgeBaseLocale.localeFor(@object)).state
output
render: ->

View file

@ -952,9 +952,9 @@ class App.Utils
path = if window.svgPolyfill then '' else 'assets/images/icons.svg'
"<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#{path}#icon-#{name}\" /></svg>"
@fontIcon: (name, font) ->
@fontIcon: (name, font, className = '') ->
@loadIconFont(font)
"<i class=\"icon\" data-font=\"#{font}\">#{String.fromCharCode('0x'+ name)}</i>"
"<i class=\"icon #{className}\" data-font=\"#{font}\">#{String.fromCharCode('0x'+ name)}</i>"
@loadIconFont: (font) ->
el = $("[data-icon-font=\"#{font}\"]")

View file

@ -29,13 +29,7 @@ InstanceMethods =
@["#{state}_at"]
can_be_published_state_css: ->
switch @can_be_published_state()
when 'archived'
'label-danger'
when 'published'
'label-success'
when 'draft'
'label-subtle'
"state-#{@can_be_published_state()}"
can_be_published_quick_actions: ->
switch @can_be_published_state()

View file

@ -40,8 +40,11 @@ InstanceMethods =
else
attrs.editorOnly = false
attrs.state = @visibilityState(kb_locale)
if @ instanceof App.KnowledgeBaseAnswer
attrs.icon = 'knowledge-base-answer'
attrs.state = @can_be_published_state()
if options.isEditor
attrs.editorOnly = !@is_internally_published(kb_locale)
@ -53,9 +56,6 @@ InstanceMethods =
# else if attrs.editorOnly
# 'kb-item--invisible'
attrs.className = if attrs.editorOnly
'kb-item--invisible'
attrs.icons = {}
if attrs.missingTranslation

View file

@ -142,8 +142,8 @@ App.ViewHelpers =
Icon: (name, className = '') ->
App.Utils.icon(name, className)
fontIcon: (name, font) ->
App.Utils.fontIcon(name, font)
fontIcon: (name, font, className = '') ->
App.Utils.fontIcon(name, font, className)
# define richtext helper
RichText: (string) ->
@ -199,3 +199,18 @@ App.ViewHelpers =
return false if _.isEmpty(contentType)
return true if contentType.match(/image\/(png|jpg|jpeg|gif)/i)
false
# icon with modifier based on visibility state
# params: className, iconset, addStateClass
iconWithModifier: (item, params) ->
if !params.className
params.className = ''
if params.addStateClass
params.className += " state-#{item.state}"
App.view('knowledge_base/_icon_with_modifier')(
item: item
className: params.className
iconset: params.iconset
)

View file

@ -141,6 +141,14 @@ class App.KnowledgeBaseCategory extends App.Model
record.findDeepAnswer(callback)
)
visibilityState: (kb_locale) ->
if @visiblePublicly(kb_locale)
'published'
else if @visibleInternally(kb_locale)
'internal'
else
'draft'
visibleInternally: (kb_locale) =>
@findDeepAnswer( (record) ->
record.is_internally_published(kb_locale)

View file

@ -0,0 +1,8 @@
<span class="modified-icon <%= @className %>">
<% if @item.iconFont: %>
<%- @fontIcon(@item.icon, @iconset, 'section-inner-icon') %>
<% else: %>
<%- @Icon(@item.icon, 'section-inner-icon') %>
<% end %>
<%- @Icon("#{@item.state}-modifier", 'modified-icon-modifier') %>
</span>

View file

@ -1,10 +1,6 @@
<a href="<%- @item.url %>">
<span class="section-inner">
<% if @item.iconFont: %>
<%- @fontIcon(@item.icon, @iconset) %>
<% else: %>
<%- @Icon(@item.icon) %>
<% end %>
<%- @iconWithModifier(@item, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
<span><%= @item.title %></span>
</span>
</a>

View file

@ -2,14 +2,14 @@
<span class="<%= @object.can_be_published_state_css() %>"><span class="label-text"><%- @T(@object.can_be_published_state()) %></span></span>
<% if @object.can_be_published_internal_in_future(): %>
<span class="label-warning"><span class="label-text"><%- @T('Will be internal') %> <%= @humanTime @object.internal_at %></span></span>
<span class="label-warning"><span class="label-text"><%- @T('Will be internal') %> <%- @humanTime(@object.internal_at) %></span></span>
<% end %>
<% if @object.can_be_published_publish_in_future(): %>
<span class="label-warning"><span class="label-text"><%- @T('Will be published') %> <%= @humanTime @object.published_at %></span></span>
<span class="label-warning"><span class="label-text"><%- @T('Will be published') %> <%- @humanTime(@object.published_at) %></span></span>
<% end %>
<% if @object.can_be_published_archive_in_future(): %>
<span class="label-warning"><span class="label-text"><%- @T('Will be archived') %> <%- @humanTime @object.archived_at %></span></span>
<span class="label-warning"><span class="label-text"><%- @T('Will be archived') %> <%- @humanTime(@object.archived_at) %></span></span>
<% end %>
</span>

View file

@ -1,12 +1,8 @@
<nav class="breadcrumbs">
<% for item in @crumbs: %>
<a class="breadcrumb" <% if item.url: %>href="<%= item.url %><% end %>">
<% if icon = item.icon: %>
<% if item.iconFont: %>
<%- @fontIcon(icon, @iconset) %>
<% else: %>
<%- @Icon(icon) %>
<% end %>
<% if item.icon: %>
<%- @iconWithModifier(item, iconset: @iconset) %>
<% end %>
<%= item.title %>

View file

@ -1,14 +1,10 @@
<a href="<%= @data.url %>">
<span class="section-inner">
<% if @data.fontName: %>
<%- @fontIcon(@data.iconName, @data.fontName) %>
<% else: %>
<%- @Icon(@data.iconName) %>
<% end %>
<%- @iconWithModifier(@data, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
<span class="section-inner-text">
<span class="section-inner-title"><%- @data.title %></span>
<span class="section-inner-detail">
<span class="section-inner-date"><%- @humanTime(@data.date) %></span> <%- @data.body %>
<span class="section-inner-date"><%- @humanTime(@data.date) %></span> <% if @data.body: %><span class="section-inner-body"><%- @data.body %></span><% end %>
</span>
</span>
</span>

View file

@ -16,6 +16,7 @@
<% for elem in @items: %>
<li>
<a href="<%= elem.url %>" class="<%= elem.className %>">
<%- @iconWithModifier(elem, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
<span class="u-textTruncate"><%= elem.title %></span>
<% if elem.icons: %>

View file

@ -78,7 +78,7 @@
this.setSubtitle(data.subtitle)
this.setPreview(data.body)
this.setURL(data.url)
this.setIcon(data.iconName, data.type)
this.setIcon(data.icon, data.type)
}
this.setTitle = function(text) {

View file

@ -163,6 +163,11 @@ ol {
background: hsl(19,90%,51%);
}
&[data-color="grey"] {
color: hsl(45,98%,17%);
background: hsl(0,0%,80%);
}
&-tag {
font-weight: bold;
margin-right: 17px;

View file

@ -1,3 +1,4 @@
.icon-archived-modifier { width: 9px; height: 9px; }
.icon-arrow-down { width: 13px; height: 7px; }
.icon-arrow-left { width: 7px; height: 13px; }
.icon-arrow-right { width: 7px; height: 13px; }
@ -19,6 +20,7 @@
.icon-diagonal-cross { width: 13px; height: 13px; }
.icon-document { width: 16px; height: 16px; }
.icon-download { width: 14px; height: 13px; }
.icon-draft-modifier { width: 9px; height: 9px; }
.icon-draggable { width: 16px; height: 16px; }
.icon-dropdown-list { width: 19px; height: 14px; }
.icon-email-button { width: 29px; height: 24px; }
@ -51,6 +53,7 @@
.icon-inactive-organization { width: 16px; height: 16px; }
.icon-inactive-user { width: 16px; height: 16px; }
.icon-info { width: 5px; height: 11px; }
.icon-internal-modifier { width: 9px; height: 9px; }
.icon-italic { width: 12px; height: 12px; }
.icon-knowledge-base-answer { width: 16px; height: 16px; }
.icon-knowledge-base { width: 24px; height: 24px; }

View file

@ -1530,6 +1530,10 @@ table {
color: $supergood-color;
}
.label-highlight {
color: $highlight-color;
}
.label-warning {
color: $ok-color;
}
@ -1542,6 +1546,19 @@ table {
color: hsl(0,0%,80%);
}
.state-archived,
.state-draft {
color: hsl(0,0%,68%);
}
.state-published {
color: $supergood-color;
}
.state-internal {
color: $highlight-color;
}
fieldset {
margin: 0 -4px;
@extend .clearfix;
@ -2360,6 +2377,41 @@ input.has-error {
}
}
.modified-icon {
position: relative;
line-height: 1;
display: block;
.nav-pills > li > a & {
align-self: center;
}
.icon {
fill: currentColor;
}
.modified-icon-modifier {
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
fill: white;
margin: 0 -2px -1px 0;
.nav-pills > li:hover > a & {
fill: #f2f2f3;
}
}
.icon-knowledge-base-answer + .modified-icon-modifier {
margin: 0 -1px 2px 0;
}
.icon-published-modifier {
display: none;
}
}
kbd {
background: hsl(200,8%,90%);
border-radius: 3px;
@ -10286,14 +10338,22 @@ output {
}
}
.icon {
.modified-icon {
margin-right: 3px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
&-icon {
fill: currentColor;
width: 20px;
height: 20px;
object-fit: contain;
margin-right: 3px;
vertical-align: middle;
line-height: 1;
}
.modified-icon-modifier {
fill: hsl(210,14%,94%);
}
}
@ -10892,11 +10952,10 @@ span.is-disabled {
}
&[data-state="archived"] {
color: $superbad-color;
border-color: transparentize($superbad-color, .65);
border-color: hsl(0,0%,80%);
.btn {
border-color: transparentize($superbad-color, .65);
border-color: hsl(0,0%,80%);
}
}
@ -10942,7 +11001,7 @@ span.is-disabled {
border-bottom: 1px solid hsl(0,0%,90%);
padding: 7px;
.breadcrumb:not(:first-child) .icon {
.breadcrumb:not(:first-child) .breadcrumb-icon {
width: 16px;
height: 16px;
}
@ -11050,6 +11109,9 @@ span.is-disabled {
[data-font] {
font-size: 60px;
}
.modified-icon {
margin: 10px 0 20px;
}
@ -11082,6 +11144,12 @@ span.is-disabled {
[data-font] {
font-size: 42px;
}
.modified-icon-modifier {
width: 18px;
height: 18px;
margin: 0 -6px -2px 0;
}
}
}
@ -11096,6 +11164,12 @@ span.is-disabled {
[data-font] {
font-size: 60px;
}
.modified-icon-modifier {
width: 22.5px;
height: 22.5px;
margin: 0 -8px -5px 0;
}
}
}
}
@ -11120,6 +11194,7 @@ span.is-disabled {
.section-inner {
position: relative;
display: flex;
align-items: flex-start;
padding: 10px 14px;
margin: 10px;
background: white;
@ -11149,6 +11224,10 @@ span.is-disabled {
content: "";
color: hsl(60,1%,34%);
}
&:only-child:after {
content: "";
}
}
&-detail {
@ -11156,29 +11235,31 @@ span.is-disabled {
margin-top: 5px;
}
[data-font],
.icon {
&-icon {
flex-shrink: 0;
&-holder {
margin-right: 11px;
margin-top: 1px;
.nav-pills & {
margin-right: 7px;
}
}
[data-font] {
&[data-font] {
font-size: 16px;
line-height: 1;
margin-right: 12px;
}
.icon {
&.icon {
fill: currentColor;
color: $highlight-color;
margin: 1px 10px 0 2px;
}
svg.icon {
width: 16px;
height: 16px;
object-fit: contain;
object-position: center top;
}
}
em {
font-style: normal;

View file

@ -87,7 +87,7 @@ class KnowledgeBase::SearchController < ApplicationController
{
id: object.id,
type: object.class.name,
iconName: 'knowledge-base-answer',
icon: 'knowledge-base-answer',
date: object.updated_at,
url: url,
title: meta.dig(:highlight, 'title')&.first || object.title,
@ -113,7 +113,7 @@ class KnowledgeBase::SearchController < ApplicationController
fontName: object.category.knowledge_base.iconset,
date: object.updated_at,
url: url,
iconName: object.category.category_icon,
icon: object.category.category_icon,
subtitle: strip_tags(parent_category_translation&.title.presence),
title: meta.dig(:highlight, 'title')&.first || strip_tags(object.title)
}
@ -132,7 +132,7 @@ class KnowledgeBase::SearchController < ApplicationController
{
id: object.id,
type: object.class.name,
iconName: 'knowledge-base',
icon: 'knowledge-base',
date: object.updated_at,
url: url,
title: meta.dig(:highlight, 'title')&.first || strip_tags(object.title)

View file

@ -150,7 +150,7 @@ module KnowledgeBaseHelper
when :published
'green'
when :archived
'red'
'grey'
end
end

View file

@ -4,7 +4,7 @@ data-available-locales='<%= @object_locales.map(&:locale).join(',') %>'>
<article class="article">
<div class="container">
<h1>
<%= @object.translation.title %> <%= visibility_note(@object) %>
<%= @object.translation.title %>
</h1>
<div class="article-content">

View file

@ -7,7 +7,7 @@
<% if @object %>
<h1>
<%= @object.translation.title %> <%= visibility_note(@object) %>
<%= @object.translation.title %>
</h1>
<% end %>

Binary file not shown.

View file

@ -1,6 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
<path d="M10 0v1h2V0h12v31H0V0h10z" id="a"/>
</defs><symbol id="icon-arrow-down" viewBox="0 0 13 7">
</defs><symbol id="icon-archived-modifier" viewBox="0 0 9 9">
<title>
archived-modifier
</title>
<g fill-rule="evenodd">
<path d="M9 2H1v7h8z"/>
<path d="M2.25 3h6.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-6.5A.25.25 0 0 1 2 3.75v-.5A.25.25 0 0 1 2.25 3zm0 1.5h6.5V9h-6.5V4.5zM5.5 6a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill="currentColor"/>
</g>
</symbol><symbol id="icon-arrow-down" viewBox="0 0 13 7">
<title>
arrow-down
</title>
@ -122,6 +130,14 @@
download
</title>
<path d="M4 0v6h6V0H4zm10 6H0l7 7 7-7z" fill-rule="evenodd"/>
</symbol><symbol id="icon-draft-modifier" viewBox="0 0 9 9">
<title>
draft-modifier
</title>
<g fill-rule="evenodd">
<path d="M5.325 0L2 5.975l.014 3.009H5.5L9 2.979V0z"/>
<path d="M6.978 1.058c-.206-.142-.477-.074-.606.152l-.322.56 1.56 1.073.322-.56a.509.509 0 0 0-.138-.664l-.816-.561zM4.834 7.685l2.543-4.434-1.561-1.074-2.543 4.435 1.561 1.073zM3 8.984l.815-.472.756-.438-1.505-1.036-.032.938L3 8.984z" fill="currentColor"/>
</g>
</symbol><symbol id="icon-draggable" viewBox="0 0 16 16">
<title>
draggable
@ -371,6 +387,14 @@
info
</title>
<path d="M2.321 4h1.17c.281 0 .45.127.45.408 0 .226-.028.465-.07.69l-.465 2.55c-.056.282-.113.563-.14.845-.015.14 0 .282.041.408.043.184.183.282.367.254.155-.014.295-.07.45-.127.113-.042.226-.127.338-.169.17-.07.324.056.268.226a.584.584 0 0 1-.17.281c-.436.437-.957.704-1.577.704-.295 0-.577 0-.873-.042-.479-.07-1.084-.662-1-1.282.057-.436.127-.859.197-1.281.127-.747.254-1.493.395-2.24.014-.042.014-.098.014-.14 0-.31-.099-.423-.409-.465-.126-.014-.267-.028-.394-.07-.155-.057-.225-.17-.211-.296.014-.127.098-.212.267-.24C1.054 4 1.152 4 1.237 4h1.084zm1.874-1.989c0 .662-.535 1.197-1.183 1.197-.662 0-1.198-.549-1.198-1.21C1.814 1.334 2.35.8 3.012.8c.662 0 1.183.535 1.183 1.211z" fill-rule="evenodd"/>
</symbol><symbol id="icon-internal-modifier" viewBox="0 0 9 9">
<title>
internal-modifier
</title>
<g fill-rule="evenodd">
<path d="M6 1H4a2 2 0 0 0-2 2v1h-.019A1 1 0 0 0 1 5v4h8V5a1 1 0 0 0-1-1V3a2 2 0 0 0-2-2z"/>
<path d="M2.543 5c-.3 0-.543.227-.543.499V8.5c0 .276.243.499.543.499h4.914c.3 0 .543-.227.543-.499V5.5C8 5.223 7.757 5 7.457 5H2.543zm1.261-.857l-.003-.053v-.017a1.44 1.44 0 0 1 .094-.616c.154-.378.477-.6 1.105-.6s.95.222 1.104.6c.084.206.108.433.096.617l-.001.016-.003.053V5h.797v-.857l-.003.053.005-.064c.02-.309-.017-.666-.16-1.018C6.553 2.42 5.94 2 5 2c-.942 0-1.553.42-1.835 1.114a2.318 2.318 0 0 0-.155 1.082l-.003-.053V5h.797v-.857z" fill="currentColor"/>
</g>
</symbol><symbol id="icon-italic" viewBox="0 0 12 12">
<title>
italic

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 84 KiB

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="9px" height="9px" viewBox="0 0 9 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>archived-modifier</title>
<desc>Created with Sketch.</desc>
<g id="archived-modifier" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="backdrop" fill="#50E3C2" points="9 2 1 2 1 9 9 9"></polygon>
<path d="M2.25,3 L8.75,3 C8.88807119,3 9,3.11192881 9,3.25 L9,3.75 C9,3.88807119 8.88807119,4 8.75,4 L2.25,4 C2.11192881,4 2,3.88807119 2,3.75 L2,3.25 C2,3.11192881 2.11192881,3 2.25,3 Z M2.25,4.5 L8.75,4.5 L8.75,9 L2.25,9 L2.25,4.5 Z M5.5,6 C5.77614237,6 6,5.77614237 6,5.5 C6,5.22385763 5.77614237,5 5.5,5 C5.22385763,5 5,5.22385763 5,5.5 C5,5.77614237 5.22385763,6 5.5,6 Z" id="archive" fill="#BD10E0"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 935 B

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="9px" height="9px" viewBox="0 0 9 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>draft-modifier</title>
<desc>Created with Sketch.</desc>
<g id="draft-modifier" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="backdrop" fill="#50E3C2" points="5.32542447 0 2 5.97510428 2.01377692 8.98393373 5.5 8.98393373 9 2.97937742 9 1.94808009e-18"></polygon>
<path d="M6.9782802,1.05773353 C6.77241149,0.91623667 6.50121443,0.984345235 6.37152196,1.20952588 L6.0499425,1.76996961 L7.61059124,2.84333946 L7.93241176,2.28342371 C8.06162209,2.05771509 8.00015076,1.76046609 7.79428205,1.61923321 L6.9782802,1.05773353 Z M4.83401538,7.68511924 L7.37748229,3.25119889 L5.8158693,2.17730106 L3.27336665,6.61227735 L4.83401538,7.68511924 Z M3,8.98393373 L3.81455546,8.51218952 L4.57149662,8.0744996 L3.06581049,7.03808788 L3.03447216,7.97603256 L3,8.98393373 Z" id="Shape" fill="#BD10E0"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="9px" height="9px" viewBox="0 0 9 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>internal-modifier</title>
<desc>Created with Sketch.</desc>
<g id="internal-modifier" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M6,1 L4,1 C2.8954305,1 2,1.8954305 2,3 L2,4 L1.98142504,4.00034509 C1.43647484,4.01046926 1,4.45512832 1,5.00017256 L1,9 L9,9 L9,5 C9,4.44771525 8.55228475,4 8,4 L8,4 L8,3 C8,1.8954305 7.1045695,1 6,1 Z" id="backdrop" fill="#50E3C2"></path>
<path d="M2.54304227,5 C2.24312829,5 2,5.226518 2,5.498515 L2,8.501485 C2,8.776807 2.24263836,9 2.54304227,9 L7.45695773,9 C7.75687171,9 8,8.773482 8,8.501485 L8,5.498515 C8,5.223193 7.75736164,5 7.45695773,5 L2.54304227,5 L2.54304227,5 Z M3.80443612,4.1428574 L3.80134315,4.0895678 C3.80172235,4.093541 3.80089692,4.0845272 3.80017743,4.0733042 C3.78841658,3.8898488 3.81176646,3.6630332 3.89537646,3.4574126 C4.04912795,3.0792944 4.37190046,2.8571426 4.99979846,2.8571426 C5.62772463,2.8571432 5.95060766,3.079331 6.10447932,3.4575044 C6.18817469,3.6632042 6.21157,3.8900828 6.19983886,4.0735154 C6.19912435,4.0846874 6.19830429,4.0936634 6.19868349,4.0896836 L6.195604,4.1428574 L6.195604,5 L6.9927,5 L6.9927,4.1428574 L6.98962057,4.1960306 C6.99164766,4.1778788 6.99329932,4.1598002 6.99505657,4.1323232 C7.01483217,3.8231054 6.97801452,3.4660628 6.83473606,3.113924 C6.55266377,2.4206696 5.941348,2 4.99979852,2 C4.05822069,2 3.44696058,2.4207056 3.16504515,3.1140158 C3.02189378,3.4660658 2.98514532,3.823031 3.00496869,4.132253 C3.00673555,4.1598134 3.00839635,4.1779496 3.01043309,4.196147 L3.00734012,4.1428574 L3.00734012,5 L3.80443612,5 L3.80443612,4.1428574 L3.80443612,4.1428574 Z" id="internal" fill="#BD10E0"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB