Extract graphics from an icon font - vector-graphics

Anyone knows how to extract the graphics in a vector format out of an icon font such as those up on github?
For example how would you convert this Font Awesome SVG:
<glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />
to HTML SVG?
<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>


Here is a little project i made to extract svg icons of svg fonts https://github.com/nfroidure/svgfont2svgicons


This JSX script can export an iconfont to SVG files. I don't know where you run it though, probably an Adobe app.

Related

how to format an svg logo for tailwind

I am trying to figure out how to use Tailwind CSS templates so that I can add my own logo instead of its template logo.
The tailwind template (salient) shows its SVG logo example as:
export function Logo(props) {
return (
<svg aria-hidden="true" viewBox="0 0 109 40" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
/>
</svg>
)
}
That renders just fine.
When I try to add my svg file that I generated in https://jakearchibald.github.io/svgomg/
I get a file with xmlns in its markup. If I remove the xmlns using the toggle on the menu at svgomg, then the image disappears. If I import it with the xmlns into the logo component provided by tailwindcss, I am getting stuck for the formatting steps required to integrate with that component.
I tried to remove all the width, height, fill and xmlns data from the markup created by svgomg, but the icon does not render.
The first fragment of the svg tag has:
<defs>
<clipPath
id="a"
>
<path
d="M97.742 171.805h179.516V203H97.742Zm0 0"
/>
</clipPath>
</defs>
<path
d="M61.738 292.654v-64.96c9.906 17.737 28.566 27.874 49.297 27.874 36.855 0 64.496-27.183 64.496-64.27 0-37.316-27.64-64.726-65.88-64.726-38.007 0-65.417 27.18-65.417 65.879v100.203Zm47.914-52.98c-27.871 0-47.914-19.582-47.914-48.375 0-29.024 20.273-49.063 48.144-49.063 28.102 0 48.14 20.04 48.14 48.832 0 29.024-20.269 48.606-48.37 48.606ZM330.78 292.654V192.451c0-38.7-27.184-65.879-65.419-65.879-38.238 0-65.652 27.41-65.652 64.727 0 37.086 27.414 64.27 64.27 64.27 20.73 0 39.386-10.138 49.523-27.876v64.961Zm-65.419-52.98c-28.105 0-48.375-19.582-48.375-48.606 0-28.793 20.27-48.832 48.145-48.832 28.102 0 48.371 20.04 48.371 49.063 0 28.793-20.27 48.375-48.14 48.375Zm0 0"
/>
<g clipPath="url(#a)"
>
Does anyone know how to format an SVG file for use the Tailwinds CSS templates?
If i copy the full svg from svgomg and replace the svg tag from tailwind salient template entirely, then a huge logo renders. If I use the viewbox settings (and delete height and width settings from svgomg) from the tailwind template, then nothing renders in the header and the footer logo renders left aligned.
The full svg made by svgomg is:
<svg xmlns="http://www.w3.org/2000/svg" width="500" viewBox="0 0 375 375" height="500" version="1.0">
<defs>
<clipPath id="a">
<path d="M146.258 167.793h82.484V318h-82.484Zm0 0"/>
</clipPath>
</defs>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"/>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"/>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"/>
<path d="M105.378 223.545c0 6.332 2.418 11.977 6.45 16.008 4.03 4.148 9.558 6.566 16.007 6.566 6.106 0 11.863-2.418 15.895-6.566 4.031-4.031 6.566-9.676 6.566-16.008V174.94h2.535c6.102 0 11.516-2.418 15.547-6.45 4.031-4.03 6.45-9.445 6.45-15.437 0-6.102-2.419-11.633-6.45-15.664-4.031-4.032-9.445-6.332-15.547-6.332h-2.535v-15.09c0-6.106-2.535-11.863-6.566-15.895-4.032-4.03-9.79-6.562-15.895-6.562-6.449 0-11.976 2.531-16.008 6.562-4.03 4.032-6.449 9.79-6.449 15.895v15.09h-2.074c-6.336 0-11.633 2.3-15.55 6.332a22.42 22.42 0 0 0-6.333 15.664c0 5.992 2.418 11.406 6.332 15.437 3.918 4.032 9.215 6.45 15.551 6.45h2.074Zm-1.5-67.148c-1.957 0-3.453-1.614-3.453-3.457 0-2.188 1.496-3.458 3.453-3.458h20.387v-33.515c0-1.957 1.266-3.453 3.457-3.453 1.84 0 3.453 1.496 3.453 3.453v33.515h21.309c1.957 0 3.457 1.27 3.457 3.458 0 1.843-1.5 3.457-3.457 3.457h-21.309v66.918c0 1.84-1.613 3.453-3.453 3.453-2.191 0-3.457-1.614-3.457-3.453v-66.918ZM237.372 246.12c13.359 0 26.836-2.536 36.738-8.18 9.906-5.645 16.473-14.512 16.473-27.41 0-9.333-3.457-16.704-8.871-22.231-5.41-5.527-12.782-9.559-20.614-12.438 1.266.114 2.418.23 3.801.23 4.95 0 10.25-1.151 14.395-4.148 4.148-2.996 7.14-7.832 7.14-15.203 0-8.867-5.758-15.894-14.625-20.617-8.87-4.723-21.078-7.14-33.98-7.14-11.516 0-20.27 2.535-27.067 6.566-6.793 4.031-11.402 9.328-14.394 14.742-2.996 5.527-4.262 11.172-4.262 15.664 0 13.707 6.91 23.149 15.777 29.14-.691-.116-1.382-.23-1.957-.23h-1.957c-6.105 0-10.71 2.301-13.82 5.758-3.113 3.457-4.61 8.063-4.61 12.668 0 8.754 3.458 15.203 8.868 20.043 5.414 4.836 12.672 8.063 20.387 10.02 7.718 1.957 15.664 2.765 22.578 2.765Zm.23-19.122c-7.832-.46-12.902-1.035-17.394-2.418-4.493-1.265-8.407-3.226-14.395-6.797-1.27-.804-1.73-1.84-1.73-2.879 0-1.382 1.039-2.535 2.879-2.535 1.152 0 2.535.461 4.148 1.27 1.496.922 3.453 1.843 5.875 2.879 4.605 2.074 11.055 4.144 20.617 4.144 8.29 0 15.086-1.265 19.695-3.57 4.606-2.188 7.254-5.067 7.254-8.637 0-3.226-1.265-5.988-3.914-8.176-5.183-4.379-13.363-7.488-22.46-10.484-4.493-1.496-8.755-3.11-12.669-5.066-7.832-3.801-13.707-8.754-13.707-16.93 0-4.149 1.383-9.215 5.645-13.016 4.144-3.8 11.172-6.68 22.574-6.68 3.57 0 6.91.344 10.25.919 6.45 1.27 11.633 3.113 14.629 5.183 1.496 1.04 2.188 2.074 2.188 2.88 0 1.73-1.383 2.882-3.34 2.882-1.614 0-2.996-.23-4.149-.809a54.023 54.023 0 0 1-4.144-1.726c-3.227-1.266-7.371-2.418-14.86-2.418-8.175 0-13.59 1.265-17.16 3.453-3.57 2.191-4.953 5.414-4.953 9.101 0 2.88 1.266 5.41 3.914 7.372 5.184 4.144 13.246 7.37 22.461 10.593 4.492 1.73 8.754 3.57 12.668 5.645 7.719 4.148 13.594 9.558 13.594 17.508 0 11.863-11.75 18.312-33.516 18.312Zm0 0" fill="#155e75"/>
<g clip-path="url(#a)">
<path fill="#fff" d="M146.258 167.793h82.789v150.062h-82.79Zm0 0"/>
</g>
<path d="M168.592 181.422v15.828h-2.406v-15.828h-6.11v-1.969h14.626v1.969ZM197.78 197.25l-2.03-5.203h-8.11l-2.047 5.203h-2.5l7.266-17.797h2.734l7.156 17.797Zm-6.077-15.969-.125.344c-.211.7-.524 1.594-.938 2.687l-2.266 5.86h6.657l-2.282-5.875a26.774 26.774 0 0 1-.718-1.969ZM210.436 197.25v-17.797h2.407v17.797ZM158.998 233.25v-17.797h2.407v15.828h8.984v1.969ZM198.086 233.25h-2.875l-3.078-11.297c-.211-.707-.508-1.973-.891-3.797a220.61 220.61 0 0 1-.563 2.438c-.148.656-1.293 4.875-3.437 12.656h-2.875l-5.25-17.797h2.516l3.203 11.313c.375 1.406.722 2.859 1.047 4.359.195-.926.425-1.938.687-3.031.27-1.094 1.441-5.305 3.516-12.64h2.312l3.094 11.077a127.65 127.65 0 0 1 1.11 4.594l.109-.438c.226-.968.41-1.753.547-2.359.144-.613 1.332-4.906 3.562-12.875h2.5ZM213.555 233.25v-17.797h2.406v17.797ZM163.791 269.25l-9.515-15.156.062 1.234.063 2.11v11.812h-2.14v-17.797h2.796l9.625 15.266c-.105-1.657-.156-2.852-.156-3.594v-11.672h2.172v17.797ZM193.999 260.172c0 1.836-.36 3.437-1.079 4.812-.71 1.375-1.726 2.434-3.046 3.172-1.313.73-2.825 1.094-4.532 1.094h-6.656v-17.797h5.875c3.02 0 5.348.758 6.984 2.266 1.633 1.511 2.454 3.664 2.454 6.453Zm-2.422 0c0-2.207-.606-3.89-1.813-5.047-1.21-1.156-2.96-1.734-5.25-1.734h-3.422v13.921h3.969c1.3 0 2.445-.285 3.438-.859.988-.57 1.75-1.394 2.28-2.469.532-1.07.798-2.343.798-3.812ZM168.506 300.344c0 1.636-.648 2.906-1.937 3.812-1.282.899-3.086 1.344-5.407 1.344-4.343 0-6.859-1.504-7.546-4.516l2.343-.468c.27 1.074.844 1.859 1.72 2.359.874.5 2.062.75 3.562.75 1.562 0 2.765-.266 3.609-.797.844-.539 1.266-1.328 1.266-2.36 0-.581-.137-1.054-.407-1.421-.261-.363-.632-.66-1.11-.89a8.014 8.014 0 0 0-1.718-.595l-2.203-.515c-1.406-.313-2.476-.625-3.203-.938-.73-.312-1.309-.66-1.734-1.047a4.009 4.009 0 0 1-.97-1.343c-.218-.508-.327-1.098-.327-1.766 0-1.52.582-2.691 1.75-3.516 1.164-.832 2.836-1.25 5.015-1.25 2.02 0 3.563.313 4.625.938 1.07.617 1.82 1.668 2.25 3.156l-2.375.422c-.261-.945-.757-1.629-1.484-2.047-.73-.426-1.746-.64-3.047-.64-1.418 0-2.5.234-3.25.703-.75.468-1.125 1.172-1.125 2.11 0 .554.145 1.007.438 1.358.289.356.707.657 1.25.907.55.25 1.64.558 3.265.922.551.125 1.098.257 1.64.39.54.125 1.063.281 1.563.469.5.18.961.387 1.39.625.438.242.813.539 1.126.89.32.356.57.774.75 1.25.187.481.281 1.047.281 1.704ZM187.318 305.25h-2.5l-7.265-17.797h2.546l4.922 12.531 1.063 3.141 1.062-3.14 4.891-12.532h2.547ZM203.74 296.266c0-2.883.773-5.118 2.328-6.704 1.55-1.582 3.726-2.375 6.531-2.375 1.969 0 3.566.336 4.797 1 1.226.668 2.176 1.735 2.844 3.204l-2.297.671c-.512-1.007-1.211-1.742-2.094-2.203-.887-.468-1.992-.703-3.312-.703-2.063 0-3.637.625-4.72 1.875-1.085 1.242-1.624 2.985-1.624 5.235 0 2.25.57 4.027 1.719 5.328 1.156 1.304 2.753 1.953 4.796 1.953 1.164 0 2.25-.176 3.25-.531 1.008-.352 1.82-.832 2.438-1.438v-3.203h-5.313v-2.031h7.547v6.14c-.949.961-2.105 1.703-3.468 2.235-1.368.523-2.852.781-4.454.781-1.867 0-3.468-.367-4.812-1.11-1.344-.738-2.375-1.804-3.094-3.203-.71-1.394-1.062-3.035-1.062-4.921Zm0 0" fill="#0b0a07"/>
</svg>

SVG's needs a width and height attributes as well as viewbox attribute to properly display and change the size programmatically, with react and next js, I personally use this tool to format my svgs to use as a component, it will simply convert the SVG markup into a component and you can change the props as you wish. I tested your svg with the tailwind template and it's working. here's the changes to mark up. but you need to properly format the SVG before exporting it as a markup from some tool to remove extra space around the SVG.
<svg aria-hidden="false" viewBox="0 0 290 320" width="100" height="100">
<defs>
<clipPath id="a">
<path d="M146.258 167.793h82.484V318h-82.484Zm0 0"></path>
</clipPath>
</defs>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"></path>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"></path>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"></path>
<path d="M105.378 223.545c0 6.332 2.418 11.977 6.45 16.008 4.03 4.148 9.558 6.566 16.007 6.566 6.106 0 11.863-2.418 15.895-6.566 4.031-4.031 6.566-9.676 6.566-16.008V174.94h2.535c6.102 0 11.516-2.418 15.547-6.45 4.031-4.03 6.45-9.445 6.45-15.437 0-6.102-2.419-11.633-6.45-15.664-4.031-4.032-9.445-6.332-15.547-6.332h-2.535v-15.09c0-6.106-2.535-11.863-6.566-15.895-4.032-4.03-9.79-6.562-15.895-6.562-6.449 0-11.976 2.531-16.008 6.562-4.03 4.032-6.449 9.79-6.449 15.895v15.09h-2.074c-6.336 0-11.633 2.3-15.55 6.332a22.42 22.42 0 0 0-6.333 15.664c0 5.992 2.418 11.406 6.332 15.437 3.918 4.032 9.215 6.45 15.551 6.45h2.074Zm-1.5-67.148c-1.957 0-3.453-1.614-3.453-3.457 0-2.188 1.496-3.458 3.453-3.458h20.387v-33.515c0-1.957 1.266-3.453 3.457-3.453 1.84 0 3.453 1.496 3.453 3.453v33.515h21.309c1.957 0 3.457 1.27 3.457 3.458 0 1.843-1.5 3.457-3.457 3.457h-21.309v66.918c0 1.84-1.613 3.453-3.453 3.453-2.191 0-3.457-1.614-3.457-3.453v-66.918ZM237.372 246.12c13.359 0 26.836-2.536 36.738-8.18 9.906-5.645 16.473-14.512 16.473-27.41 0-9.333-3.457-16.704-8.871-22.231-5.41-5.527-12.782-9.559-20.614-12.438 1.266.114 2.418.23 3.801.23 4.95 0 10.25-1.151 14.395-4.148 4.148-2.996 7.14-7.832 7.14-15.203 0-8.867-5.758-15.894-14.625-20.617-8.87-4.723-21.078-7.14-33.98-7.14-11.516 0-20.27 2.535-27.067 6.566-6.793 4.031-11.402 9.328-14.394 14.742-2.996 5.527-4.262 11.172-4.262 15.664 0 13.707 6.91 23.149 15.777 29.14-.691-.116-1.382-.23-1.957-.23h-1.957c-6.105 0-10.71 2.301-13.82 5.758-3.113 3.457-4.61 8.063-4.61 12.668 0 8.754 3.458 15.203 8.868 20.043 5.414 4.836 12.672 8.063 20.387 10.02 7.718 1.957 15.664 2.765 22.578 2.765Zm.23-19.122c-7.832-.46-12.902-1.035-17.394-2.418-4.493-1.265-8.407-3.226-14.395-6.797-1.27-.804-1.73-1.84-1.73-2.879 0-1.382 1.039-2.535 2.879-2.535 1.152 0 2.535.461 4.148 1.27 1.496.922 3.453 1.843 5.875 2.879 4.605 2.074 11.055 4.144 20.617 4.144 8.29 0 15.086-1.265 19.695-3.57 4.606-2.188 7.254-5.067 7.254-8.637 0-3.226-1.265-5.988-3.914-8.176-5.183-4.379-13.363-7.488-22.46-10.484-4.493-1.496-8.755-3.11-12.669-5.066-7.832-3.801-13.707-8.754-13.707-16.93 0-4.149 1.383-9.215 5.645-13.016 4.144-3.8 11.172-6.68 22.574-6.68 3.57 0 6.91.344 10.25.919 6.45 1.27 11.633 3.113 14.629 5.183 1.496 1.04 2.188 2.074 2.188 2.88 0 1.73-1.383 2.882-3.34 2.882-1.614 0-2.996-.23-4.149-.809a54.023 54.023 0 0 1-4.144-1.726c-3.227-1.266-7.371-2.418-14.86-2.418-8.175 0-13.59 1.265-17.16 3.453-3.57 2.191-4.953 5.414-4.953 9.101 0 2.88 1.266 5.41 3.914 7.372 5.184 4.144 13.246 7.37 22.461 10.593 4.492 1.73 8.754 3.57 12.668 5.645 7.719 4.148 13.594 9.558 13.594 17.508 0 11.863-11.75 18.312-33.516 18.312Zm0 0" fill="#155e75"></path>
<g clip-path="url(#a)">
<path fill="#fff" d="M146.258 167.793h82.789v150.062h-82.79Zm0 0"></path>
</g>
<path d="M168.592 181.422v15.828h-2.406v-15.828h-6.11v-1.969h14.626v1.969ZM197.78 197.25l-2.03-5.203h-8.11l-2.047 5.203h-2.5l7.266-17.797h2.734l7.156 17.797Zm-6.077-15.969-.125.344c-.211.7-.524 1.594-.938 2.687l-2.266 5.86h6.657l-2.282-5.875a26.774 26.774 0 0 1-.718-1.969ZM210.436 197.25v-17.797h2.407v17.797ZM158.998 233.25v-17.797h2.407v15.828h8.984v1.969ZM198.086 233.25h-2.875l-3.078-11.297c-.211-.707-.508-1.973-.891-3.797a220.61 220.61 0 0 1-.563 2.438c-.148.656-1.293 4.875-3.437 12.656h-2.875l-5.25-17.797h2.516l3.203 11.313c.375 1.406.722 2.859 1.047 4.359.195-.926.425-1.938.687-3.031.27-1.094 1.441-5.305 3.516-12.64h2.312l3.094 11.077a127.65 127.65 0 0 1 1.11 4.594l.109-.438c.226-.968.41-1.753.547-2.359.144-.613 1.332-4.906 3.562-12.875h2.5ZM213.555 233.25v-17.797h2.406v17.797ZM163.791 269.25l-9.515-15.156.062 1.234.063 2.11v11.812h-2.14v-17.797h2.796l9.625 15.266c-.105-1.657-.156-2.852-.156-3.594v-11.672h2.172v17.797ZM193.999 260.172c0 1.836-.36 3.437-1.079 4.812-.71 1.375-1.726 2.434-3.046 3.172-1.313.73-2.825 1.094-4.532 1.094h-6.656v-17.797h5.875c3.02 0 5.348.758 6.984 2.266 1.633 1.511 2.454 3.664 2.454 6.453Zm-2.422 0c0-2.207-.606-3.89-1.813-5.047-1.21-1.156-2.96-1.734-5.25-1.734h-3.422v13.921h3.969c1.3 0 2.445-.285 3.438-.859.988-.57 1.75-1.394 2.28-2.469.532-1.07.798-2.343.798-3.812ZM168.506 300.344c0 1.636-.648 2.906-1.937 3.812-1.282.899-3.086 1.344-5.407 1.344-4.343 0-6.859-1.504-7.546-4.516l2.343-.468c.27 1.074.844 1.859 1.72 2.359.874.5 2.062.75 3.562.75 1.562 0 2.765-.266 3.609-.797.844-.539 1.266-1.328 1.266-2.36 0-.581-.137-1.054-.407-1.421-.261-.363-.632-.66-1.11-.89a8.014 8.014 0 0 0-1.718-.595l-2.203-.515c-1.406-.313-2.476-.625-3.203-.938-.73-.312-1.309-.66-1.734-1.047a4.009 4.009 0 0 1-.97-1.343c-.218-.508-.327-1.098-.327-1.766 0-1.52.582-2.691 1.75-3.516 1.164-.832 2.836-1.25 5.015-1.25 2.02 0 3.563.313 4.625.938 1.07.617 1.82 1.668 2.25 3.156l-2.375.422c-.261-.945-.757-1.629-1.484-2.047-.73-.426-1.746-.64-3.047-.64-1.418 0-2.5.234-3.25.703-.75.468-1.125 1.172-1.125 2.11 0 .554.145 1.007.438 1.358.289.356.707.657 1.25.907.55.25 1.64.558 3.265.922.551.125 1.098.257 1.64.39.54.125 1.063.281 1.563.469.5.18.961.387 1.39.625.438.242.813.539 1.126.89.32.356.57.774.75 1.25.187.481.281 1.047.281 1.704ZM187.318 305.25h-2.5l-7.265-17.797h2.546l4.922 12.531 1.063 3.141 1.062-3.14 4.891-12.532h2.547ZM203.74 296.266c0-2.883.773-5.118 2.328-6.704 1.55-1.582 3.726-2.375 6.531-2.375 1.969 0 3.566.336 4.797 1 1.226.668 2.176 1.735 2.844 3.204l-2.297.671c-.512-1.007-1.211-1.742-2.094-2.203-.887-.468-1.992-.703-3.312-.703-2.063 0-3.637.625-4.72 1.875-1.085 1.242-1.624 2.985-1.624 5.235 0 2.25.57 4.027 1.719 5.328 1.156 1.304 2.753 1.953 4.796 1.953 1.164 0 2.25-.176 3.25-.531 1.008-.352 1.82-.832 2.438-1.438v-3.203h-5.313v-2.031h7.547v6.14c-.949.961-2.105 1.703-3.468 2.235-1.368.523-2.852.781-4.454.781-1.867 0-3.468-.367-4.812-1.11-1.344-.738-2.375-1.804-3.094-3.203-.71-1.394-1.062-3.035-1.062-4.921Zm0 0" fill="#0b0a07"></path>
</svg>
you can resize the SVG by just passing width and height to the SVG.
But my preferred way of using svgs in react and next js is like this. I'm using typescript with react or next, this is an example of how my icons or logo svgs look like
import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
import { FC } from 'react';
interface Props {
color?: string;
size?: number;
}
const BackIcon: FC<Props> = ({ size, color }) => {
return (
<Svg width={size ?? 8} height={size ?? 16} viewBox="0 0 8 16" fill="none">
<Path
d="M7 15 1 8l6-7"
stroke={color ?? '#525252'}
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
);
};
export default BackIcon;
this is a icon, so I need the luxury to change the color and size of the icon according to the place I use it, that's why I made it accept the color and size as the props. you can use this as a component in your app like below
<BackIcon size={10} color={'#ddd'} />
and this is another way I prefer my icon components should looks like
import React from 'react'
interface Props {
size?: number | string
color?: string
}
const CloseIcon: React.FC<Props> = ({ size, color }) => {
return (
<svg width={size ?? '100%'} height={size ?? '100%'} fill="none" viewBox="0 0 16 16">
<path
d="M1.25 1.25 8 8m0 0-6.75 6.75M8 8l6.75 6.75M8 8l6.75-6.75"
stroke={color ?? 'currentColor'}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
export default CloseIcon
see the difference here, I used 100% as width and height and currentColor as the default color, with this approach you can pass color and size to the icon itself if you want or you can just wrap it around another element, and style the parent element, so the sizes and color of the parent element will be used in the SVG component. I think this is easy to use in some scenarios. here's how we can use this kind of SVG
<button type="button" className="close-button">
<CloseIcon size={12} />
</button>
style.css
.close-button {
color: 'red';
}
color will be inherited from the icon component with the above implementation and you can do the same for the size.
those are just extra tips, if any one needs to know how to work with svgs in react as components, and as I described above, viewbox attributes plays a huge role when it comes to sizing the svgs, I suggest reading about it little more and try to understand how svgs work. svgs can be tricky sometimes. happy coding!

Your outer viewBox is overriding the base svg which is passed as props.
Try removing that, that might help.
export function Logo(props) {
return (
<svg aria-hidden="true" viewBox="0 0 109 40" {...props}> 👈 This viewBox is overriding your svg which is passed through as prop
<path
...
/>
</svg>
)
}
Try to keep only one viewBox either in outside svg or inside svg, preferably use it in inner svg and dont alter that in your outer svg
export function Logo(props) {
return (
<svg aria-hidden="true" {...props}> 👈 Now this is expected to work
<path
...
/>
</svg>
)
}

It's the viewbox setting.
Use the one from svgomg to replace the one in the template.

Change color/fill of a SVG path when used in the content of a ::before pseudo-element [duplicate]

This question already has answers here:
How to modify the fill color of an SVG image when being served as background image?
(24 answers)
Closed 7 months ago.
I have to display an icon as an SVG path in the content of the ::before pseudo element of a td.
According to many resources I found online, this alone is pretty straight-forward and can be achieved by the following code:
#mytd::before {
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z'/></svg>");
display: inline-block;
width: 18px;
margin-left: 2px;
margin-right: 3px;
}
The problem is that I need to also change the default black color to something else, ideally to a CSS variable (var(--wd-link-color)), but if that's not possible, a simple #hex would be acceptable also. However, no matter what I tried, it doesn't seem to be working... Any help please? I created this little fiddle for you. TIA.

You could use a mask.
div::before {
display: inline-block;
width: 18px;
height: 18px;
content: '';
background: var(--c);
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z'/></svg>") center no-repeat;
}
<div style="--c:red;"></div>
<div style="--c:orange;"></div>
<div style="--c:yellow;"></div>
<div style="--c:green;"></div>
<div style="--c:blue;"></div>
<div style="--c:indigo;"></div>
<div style="--c:violet;"></div>

If you include your SVG as a data URI background into the style, you need to hardcode the color of the fill (or stroke) property by encoding the # symbol into %23 so if your color was #c642b7 your svg would be
<path fill='%23c642b7' d='M350.85 129c25.97...
div::before {
display: inline-block;
inline-size: 1rem;
margin-inline: 0 .5rem;
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z' fill='%23c642b7'/></svg>");
}
<div>Icon</div>

How to display sprite sheet element as background-image or content:url() in react?

Expectation:
In React app, I'm trying to display an svg icon (from an svg sprite sheet) in h1::before either using background-image or content:url().
It ends up showing nothing.
// in App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
</div>
);
}
// in styles.css
h1::before {
content: "...";
border: 1px solid grey;
background-image: url(icons.svg#working-at-home);
width: 15px;
height: 15px;
}
// in icons.svg
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="working-at-home" viewBox="0 0 512.006 512.006"><title>working-at-home</title><g><path d="m360.801 213.483 12.911-77.461h20.004l23.994 120h30.591l-27.589-137.944c-1.406-7.002-7.559-12.056-14.707-12.056h-27.295l12.09-72.539c1.362-8.174-4.16-15.894-12.334-17.256-8.145-1.509-15.894 4.146-17.256 12.334l-30 180c-1.621 9.727 4.953 15.926 12.344 17.209 7.392 1.283 15.6-2.35 17.247-12.287z"/><path d="m256.006 496.022h30c8.284 0 15-6.716 15-15v-135c0-33.138-26.863-60-60-60h-121c-10.977 0-21.14-3.177-30-8.344v38.344c0 16.567 13.431 30 30 30h121v135c0 8.284 6.716 15 15 15z"/><path d="m120.006 436.022v30h-15c-8.291 0-15 6.709-15 15s6.709 15 15 15h60c8.291 0 15-6.709 15-15s-6.709-15-15-15h-15v-30h31c16.569 0 30-13.433 30-30 0-16.569-13.431-30-30-30h-121v-45c0-151.802-30.293-214.131-31.582-216.709-3.721-7.397-12.7-10.371-20.127-6.709-7.412 3.706-10.415 12.715-6.709 20.127.292.571 28.418 58.506 28.418 203.291 0 5.235 0 63.704 0 60 0 24.853 20.147 45 45 45z"/><path d="m497.006 286.022c-6.442 0-196.41 0-189.408 0 7.817 8.668 13.885 18.792 17.88 30h95.528v165c0 8.291 6.709 15 15 15s15-6.709 15-15v-165h46c8.291 0 15-6.709 15-15s-6.709-15-15-15z"/></g><circle cx="121.006" cy="76.022" r="45"/><path d="m91.006 151.022v75c0 16.567 13.431 30 30 30h105c8.284 0 15-6.716 15-15 0-24.853-20.147-45-45-45h-45v-45c0-16.569-13.431-30-30-30s-30 13.431-30 30z"/></symbol><symbol id="github" viewBox="0 0 24 24"><title>github</title><path d="m12 .5c-6.63 0-12 5.28-12 11.792 0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56 4.801-1.548 8.236-5.97 8.236-11.173 0-6.512-5.373-11.792-12-11.792z"/></symbol><symbol id="phone-call" viewBox="0 0 473.806 473.806"><title>phone-call</title><path d="M374.456,293.506c-9.7-10.1-21.4-15.5-33.8-15.5c-12.3,0-24.1,5.3-34.2,15.4l-31.6,31.5c-2.6-1.4-5.2-2.7-7.7-4 c-3.6-1.8-7-3.5-9.9-5.3c-29.6-18.8-56.5-43.3-82.3-75c-12.5-15.8-20.9-29.1-27-42.6c8.2-7.5,15.8-15.3,23.2-22.8 c2.8-2.8,5.6-5.7,8.4-8.5c21-21,21-48.2,0-69.2l-27.3-27.3c-3.1-3.1-6.3-6.3-9.3-9.5c-6-6.2-12.3-12.6-18.8-18.6 c-9.7-9.6-21.3-14.7-33.5-14.7s-24,5.1-34,14.7c-0.1,0.1-0.1,0.1-0.2,0.2l-34,34.3c-12.8,12.8-20.1,28.4-21.7,46.5 c-2.4,29.2,6.2,56.4,12.8,74.2c16.2,43.7,40.4,84.2,76.5,127.6c43.8,52.3,96.5,93.6,156.7,122.7c23,10.9,53.7,23.8,88,26 c2.1,0.1,4.3,0.2,6.3,0.2c23.1,0,42.5-8.3,57.7-24.8c0.1-0.2,0.3-0.3,0.4-0.5c5.2-6.3,11.2-12,17.5-18.1c4.3-4.1,8.7-8.4,13-12.9 c9.9-10.3,15.1-22.3,15.1-34.6c0-12.4-5.3-24.3-15.4-34.3L374.456,293.506z M410.256,398.806 C410.156,398.806,410.156,398.906,410.256,398.806c-3.9,4.2-7.9,8-12.2,12.2c-6.5,6.2-13.1,12.7-19.3,20 c-10.1,10.8-22,15.9-37.6,15.9c-1.5,0-3.1,0-4.6-0.1c-29.7-1.9-57.3-13.5-78-23.4c-56.6-27.4-106.3-66.3-147.6-115.6 c-34.1-41.1-56.9-79.1-72-119.9c-9.3-24.9-12.7-44.3-11.2-62.6c1-11.7,5.5-21.4,13.8-29.7l34.1-34.1c4.9-4.6,10.1-7.1,15.2-7.1 c6.3,0,11.4,3.8,14.6,7c0.1,0.1,0.2,0.2,0.3,0.3c6.1,5.7,11.9,11.6,18,17.9c3.1,3.2,6.3,6.4,9.5,9.7l27.3,27.3 c10.6,10.6,10.6,20.4,0,31c-2.9,2.9-5.7,5.8-8.6,8.6c-8.4,8.6-16.4,16.6-25.1,24.4c-0.2,0.2-0.4,0.3-0.5,0.5 c-8.6,8.6-7,17-5.2,22.7c0.1,0.3,0.2,0.6,0.3,0.9c7.1,17.2,17.1,33.4,32.3,52.7l0.1,0.1c27.6,34,56.7,60.5,88.8,80.8 c4.1,2.6,8.3,4.7,12.3,6.7c3.6,1.8,7,3.5,9.9,5.3c0.4,0.2,0.8,0.5,1.2,0.7c3.4,1.7,6.6,2.5,9.9,2.5c8.3,0,13.5-5.2,15.2-6.9 l34.2-34.2c3.4-3.4,8.8-7.5,15.1-7.5c6.2,0,11.3,3.9,14.4,7.3c0.1,0.1,0.1,0.1,0.2,0.2l55.1,55.1 C420.456,377.706,420.456,388.206,410.256,398.806z"/><path d="M256.056,112.706c26.2,4.4,50,16.8,69,35.8s31.3,42.8,35.8,69c1.1,6.6,6.8,11.2,13.3,11.2c0.8,0,1.5-0.1,2.3-0.2 c7.4-1.2,12.3-8.2,11.1-15.6c-5.4-31.7-20.4-60.6-43.3-83.5s-51.8-37.9-83.5-43.3c-7.4-1.2-14.3,3.7-15.6,11 S248.656,111.506,256.056,112.706z"/><path d="M473.256,209.006c-8.9-52.2-33.5-99.7-71.3-137.5s-85.3-62.4-137.5-71.3c-7.3-1.3-14.2,3.7-15.5,11 c-1.2,7.4,3.7,14.3,11.1,15.6c46.6,7.9,89.1,30,122.9,63.7c33.8,33.8,55.8,76.3,63.7,122.9c1.1,6.6,6.8,11.2,13.3,11.2 c0.8,0,1.5-0.1,2.3-0.2C469.556,223.306,474.556,216.306,473.256,209.006z"/></symbol><symbol id="message" viewBox="0 0 512 512"><title>message</title><path d="M467,80.609H45c-24.813,0-45,20.187-45,45v260.782c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V125.609 C512,100.796,491.813,80.609,467,80.609z M461.127,110.609l-6.006,5.001L273.854,266.551c-10.346,8.614-25.364,8.614-35.708,0 L56.879,115.61l-6.006-5.001H461.127z M30,132.267L177.692,255.25L30,353.543V132.267z M467,401.391H45 c-7.248,0-13.31-5.168-14.699-12.011l171.445-114.101l17.204,14.326c10.734,8.938,23.893,13.407,37.051,13.407 c13.158,0,26.316-4.469,37.051-13.407l17.204-14.326l171.444,114.1C480.31,396.224,474.248,401.391,467,401.391z M482,353.543 l-147.692-98.292L482,132.267V353.543z"/></symbol><symbol id="graduation-hat" viewBox="0 0 511.962 511.962"><title>graduation-hat</title><path d="m502.343 177.3-240-104c-4.059-1.759-8.665-1.759-12.724 0l-240 104c-12.824 5.557-12.827 23.804 0 29.361l86.362 37.423v99.896c0 53.832 70.28 96 160 96s160-42.168 160-96v-99.896l16-6.933v170.829c0 8.836 7.164 16 16 16s16-7.164 16-16v-184.695l38.362-16.623c12.824-5.557 12.826-23.804 0-29.362zm-246.362-71.882 199.759 86.563-15.843 6.865-181.932-22.742c-8.769-1.089-16.765 5.124-17.861 13.892s5.124 16.765 13.892 17.861l128.142 16.018-126.157 54.668c-112.857-48.905-88.82-38.489-199.759-86.563zm128 238.563c0 15.075-12.373 30.596-33.947 42.581-51.381 28.545-136.575 28.629-188.106 0-21.574-11.985-33.947-27.506-33.947-42.581v-86.029l121.638 52.71c4.052 1.756 8.657 1.762 12.724 0l121.638-52.71z"/></symbol><symbol id="skill" viewBox="0 0 512 512"><title>skill</title><path d="m386.372 165.925c0-10.2-8.299-18.499-18.499-18.499h-1.242c-1.589 0-2.96-1.085-3.41-2.701-2.133-7.646-5.101-15.084-8.824-22.107-.765-1.442-.544-3.146.551-4.239l.633-.633c7.212-7.213 7.212-18.95 0-26.162l-14.785-14.784c-7.229-7.229-18.932-7.231-26.162 0l-.138.138c-1.12 1.119-2.85 1.325-4.311.509-7.212-4.026-14.878-7.244-22.785-9.564-1.44-.423-2.446-1.793-2.446-3.377 0-10.201-8.298-18.499-18.498-18.499h-20.908c-10.201 0-18.499 8.299-18.499 18.543 0 1.54-1.006 2.91-2.445 3.333-7.908 2.321-15.574 5.539-22.785 9.564-1.46.814-3.192.611-4.32-.518l-.13-.129c-7.223-7.223-18.932-7.231-26.161 0l-14.784 14.783c-7.229 7.229-7.231 18.931 0 26.162l.633.633c1.093 1.094 1.314 2.798.55 4.239-3.723 7.021-6.692 14.459-8.824 22.106-.451 1.616-1.821 2.702-3.41 2.702h-1.243c-10.201 0-18.499 8.299-18.499 18.499v20.907c0 10.201 8.299 18.499 18.499 18.499h2.228c1.538 0 2.897 1.04 3.381 2.589 2.293 7.342 5.37 14.474 9.145 21.197.727 1.295.464 2.97-.639 4.073l-1.821 1.82c-7.229 7.229-7.231 18.931 0 26.162l14.783 14.783c7.228 7.228 18.931 7.232 26.161 0l2.315-2.314c1.078-1.079 2.725-1.357 4.005-.674 6.659 3.551 13.701 6.428 20.93 8.548 1.432.42 2.431 1.813 2.431 3.389v3.346c0 10.2 8.299 18.499 18.499 18.499h20.908c10.2 0 18.498-8.299 18.498-18.499v-3.346c0-1.576 1-2.969 2.431-3.389 7.23-2.121 14.272-4.997 20.93-8.548 1.279-.682 2.927-.405 4.006.675l2.313 2.313c7.228 7.229 18.931 7.231 26.163 0l14.784-14.784c7.212-7.213 7.212-18.949-.001-26.162l-1.82-1.819c-1.103-1.104-1.367-2.78-.641-4.073 3.775-6.721 6.852-13.853 9.147-21.199.483-1.548 1.842-2.588 3.38-2.588h2.228c10.2 0 18.499-8.299 18.499-18.499v-20.905zm-14.999 20.907c0 1.931-1.57 3.501-3.501 3.501h-2.228c-8.135 0-15.248 5.271-17.697 13.115-1.983 6.349-4.643 12.515-7.908 18.326-4.003 7.13-2.723 16.186 3.113 22.024l1.82 1.82c1.365 1.365 1.365 3.586 0 4.951l-14.783 14.783c-1.367 1.367-3.583 1.369-4.952 0l-2.313-2.313c-5.705-5.706-14.617-7.066-21.669-3.303-5.756 3.07-11.844 5.556-18.094 7.39-7.777 2.281-13.208 9.593-13.208 17.781v3.346c0 1.93-1.57 3.5-3.5 3.5h-20.908c-1.931 0-3.501-1.57-3.501-3.5v-3.346c0-8.188-5.432-15.5-13.208-17.781-6.248-1.833-12.335-4.319-18.093-7.39-2.667-1.422-5.599-2.113-8.523-2.113-4.809 0-9.597 1.867-13.145 5.415l-2.315 2.314c-1.366 1.366-3.581 1.368-4.95 0l-14.784-14.783c-1.366-1.367-1.368-3.582 0-4.951l1.821-1.821c5.836-5.836 7.116-14.892 3.112-22.023-3.264-5.813-5.924-11.979-7.907-18.326-2.45-7.845-9.562-13.116-17.697-13.116h-2.228c-1.93 0-3.501-1.57-3.501-3.501v-20.907c0-1.93 1.57-3.5 3.501-3.5h1.243c8.269 0 15.612-5.622 17.857-13.671 1.844-6.61 4.41-13.039 7.629-19.11 3.87-7.3 2.585-16.089-3.196-21.87l-.633-.633c-1.366-1.367-1.368-3.582 0-4.951l14.784-14.784c.892-.892 1.933-1.025 2.474-1.025s1.583.133 2.485 1.035l.129.129c5.821 5.822 14.962 7.056 22.228 3 6.235-3.481 12.863-6.263 19.698-8.269 7.784-2.284 13.22-9.573 13.22-17.769 0-1.931 1.57-3.501 3.501-3.501h20.908c1.93 0 3.5 1.57 3.5 3.545 0 8.151 5.437 15.44 13.222 17.725 6.834 2.005 13.462 4.787 19.698 8.268 7.265 4.055 16.406 2.822 22.228-2.999l.139-.139c1.365-1.366 3.583-1.368 4.95 0l14.784 14.784c1.365 1.365 1.365 3.586 0 4.951l-.632.632c-5.783 5.782-7.067 14.571-3.197 21.871 3.218 6.071 5.786 12.501 7.628 19.11 2.245 8.049 9.588 13.671 17.858 13.671h1.242c1.931 0 3.501 1.57 3.501 3.5v20.908z"/><path d="m256 96.26c-43.25 0-78.437 35.187-78.437 78.437 0 43.311 35.298 78.437 78.437 78.437 43.144 0 78.437-35.132 78.437-78.437 0-43.25-35.187-78.437-78.437-78.437zm0 141.876c-17.739 0-33.792-7.328-45.316-19.104 6.929-10.753 17.429-18.719 29.671-22.424 4.679 2.462 10 3.864 15.645 3.864s10.965-1.401 15.645-3.864c12.243 3.705 22.743 11.671 29.672 22.424-11.525 11.776-27.578 19.104-45.317 19.104zm-18.715-71.379c0-10.319 8.395-18.715 18.715-18.715s18.715 8.395 18.715 18.715c0 10.319-8.396 18.715-18.715 18.715s-18.715-8.395-18.715-18.715zm73.561 39.76c-6.999-9.208-16.188-16.494-26.717-21.204 3.526-5.327 5.586-11.704 5.586-18.556 0-18.59-15.124-33.714-33.714-33.714s-33.714 15.124-33.714 33.714c0 6.852 2.06 13.229 5.585 18.556-10.529 4.71-19.719 11.996-26.718 21.205-5.453-9.362-8.593-20.228-8.593-31.82 0-34.98 28.459-63.439 63.439-63.439s63.438 28.459 63.438 63.439c0 11.592-3.14 22.458-8.592 31.819z"/><path d="m381.263 51.619c-33.873-33.629-78.869-51.966-126.577-51.614-40.215.291-78.124 13.808-109.628 39.09-3.231 2.593-3.748 7.312-1.156 10.543 2.593 3.229 7.312 3.748 10.543 1.155 28.845-23.148 63.545-35.523 100.35-35.789 43.742-.321 84.886 16.467 115.901 47.259 31.02 30.796 48.102 71.827 48.102 115.534 0 37.393-12.329 72.551-35.653 101.675-2.59 3.233-2.068 7.952 1.165 10.542 1.384 1.108 3.039 1.646 4.683 1.646 2.199 0 4.378-.962 5.858-2.812 25.115-31.358 38.946-70.796 38.946-111.051 0-47.734-18.657-92.545-52.534-126.178z"/><path d="m370.942 305.203c-3.34-2.448-8.034-1.728-10.483 1.613-10.254 13.982-18.897 29.084-25.775 44.942h-157.261c-10.179-23.552-24.116-45.067-41.482-64.018-27.38-29.877-42.557-68.659-42.737-109.203-.168-37.868 13.102-74.882 37.368-104.22 2.64-3.192 2.192-7.919-.999-10.558-3.192-2.641-7.919-2.192-10.558.999-26.5 32.041-40.993 72.472-40.809 113.846.196 44.281 16.774 86.638 46.678 119.27 15.624 17.05 28.269 36.327 37.681 57.379-7.727 4.488-12.939 12.851-12.939 22.412 0 7.193 2.949 13.709 7.698 18.407-4.749 4.699-7.698 11.214-7.698 18.407s2.949 13.708 7.698 18.407c-4.749 4.699-7.698 11.214-7.698 18.407 0 14.284 11.622 25.906 25.906 25.906h.477v2.098c0 18.033 14.671 32.704 32.704 32.704h94.576c18.034 0 32.704-14.671 32.704-32.704v-2.098h.477c14.285 0 25.906-11.622 25.906-25.906 0-7.193-2.948-13.708-7.698-18.407 4.749-4.699 7.698-11.214 7.698-18.407s-2.948-13.708-7.698-18.407c4.749-4.699 7.698-11.214 7.698-18.407 0-9.532-5.178-17.872-12.866-22.371 6.253-13.946 13.978-27.243 23.045-39.608 2.449-3.341 1.726-8.034-1.613-10.483zm-49.948 174.093c0 9.763-7.943 17.706-17.706 17.706h-94.576c-9.763 0-17.706-7.943-17.706-17.706v-2.098h129.987v2.098zm-97.818-38.912h113.293c6.014 0 10.907 4.893 10.907 10.907s-4.893 10.907-10.907 10.907h-160.938c-6.014 0-10.907-4.893-10.907-10.907s4.893-10.907 10.907-10.907h12.585c4.142 0 7.499-3.358 7.499-7.499s-3.358-7.499-7.499-7.499h-12.585c-6.014 0-10.907-4.893-10.907-10.907s4.893-10.907 10.907-10.907h160.938c6.014 0 10.907 4.893 10.907 10.907s-4.893 10.907-10.907 10.907h-113.293c-4.142 0-7.499 3.358-7.499 7.499s3.357 7.499 7.499 7.499zm113.293-51.812h-160.938c-6.014 0-10.907-4.893-10.907-10.908 0-5.327 3.841-9.767 8.898-10.714.161-.021.323-.042.484-.074.5-.07 1.007-.12 1.526-.12h160.938c.544 0 1.075.053 1.599.131.167.033.334.055.501.077 5.012.982 8.807 5.404 8.807 10.7-.001 6.015-4.894 10.908-10.908 10.908z"/></symbol></svg>
Here is the CodeSandbox. You can see a box with three dots in which you can replace three dots with svg icons.
So how do I fix this problem?
Next topic
I have done some research on this, it turns out that symbol tag does't work with background-image or content:url. So change symbol tags of svg to g tag except for the outmost one.
Then it turns out to be the next issue, which is all svgs images of the sprite sheet collapsed into one square on the screen( they overlapped each other). So, I give up rendering svg sprite sheet with either background-image or content:url.
I guess there are ways to fix this issue. For now, I will just stick with traditional way to display svg in html. (using '<svg>' and '<use>' tag in html. Or don't use svg sprite sheet, just separate svg sprite sheet into single svg files.)
If you know how to fix this issue. Please let me know.

How do I use a Font Awesome icon for a custom Gutenberg block?

I am following a tutorial by Zac Gordon regarding how to use the SVG path for a custom icon of a Gutenberg block. I'm looking to use the Info Circle from Font Awesome.
I have the following defined for the icon element but the icon space is empty:
const iconEl = el('svg', { width: 20, height: 20 },
el('path', { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" } )
);
Any ideas?

Success! I had to pass the viewBox attribute from the Font Awesome SVG file. The code below worked for me:
const iconEl = el('svg', { width: 20, height: 20, viewBox: '0 0 512 512' },
el('path', { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" } )
);

You could even improve your code's readability a little bit more by using JSX, like so:
const icon = () => {
return (
<svg width="20px" height="20px" viewBox="0 0 24 24">
<path d="M12,2c-5.522,0 -10,4.479 -10,10c0,5.524 4.478,10 10,10c5.522,0 10,-4.476 10,-10c0,-5.521 -4.478,-10 -10,-10Zm0,4.435c0.935,0 1.694,0.759 1.694,1.694c0,0.935 -0.759,1.694 -1.694,1.694c-0.935,0 -1.694,-0.759 -1.694,-1.694c0,-0.935 0.759,-1.694 1.694,-1.694Zm2.258,10.242c0,0.268 -0.217,0.484 -0.484,0.484l-3.548,0c-0.267,0 -0.484,-0.216 -0.484,-0.484l0,-0.967c0,-0.268 0.217,-0.484 0.484,-0.484l0.484,0l0,-2.581l-0.484,0c-0.267,0 -0.484,-0.216 -0.484,-0.484l0,-0.967c0,-0.268 0.217,-0.484 0.484,-0.484l2.58,0c0.268,0 0.484,0.216 0.484,0.484l0,4.032l0.484,0c0.267,0 0.484,0.216 0.484,0.484l0,0.967Z" />
</svg>
);
};
export default icon;
I took the liberty to adjust your viewBox values. It should match or be proportionate to your icon size.
Good luck with it! ;)

Using Fontello SVG as a background-image

I am using font icons (web fonts) generated from Fontello. Downloaded pack includes SVG file.
Example. I generated fontello pack consisting of only 1 icon (mail-1)
It looks as below:
<?xml version="1.0" standalone="no"?>
<!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">
<metadata>Copyright (C) 2015 by original authors # fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000">
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="mail-1" unicode="" d="m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z" horiz-adv-x="1000" />
</font>
</defs>
</svg>
I need to use this icon in CSS as background-image, thanks to similar code:
.icon {
background: url('data:image/svg+xml; ... ');
}
...I read about it on https://css-tricks.com/using-svg/...
But I do not know how can I generate this data:image/svg+xml code from my SVG (Fontello) code. Of course I pasted this SVG code as it is in background: url('data:image/svg+xml;... but it does not work...
help!

I create a svg file with a path from the glyph with the following steps.
First, go to the config.json and locate the character.
It should be something like:
{
"uid": "91d1768d00bc3e6ee51c2fcea9810679",
"css": "my-address",
"code": 57514,
"src": "custom_icons",
"selected": true,
"svg": {
"path": "M994.5 17.7C988.8 11.8 980 10.1 972.5 13.6L11.3 454.7C3.6 458.3-0.9 466.5 0.2 474.9S7.8 490 16.2 491.4L447.3 563.7 496.6 971.1C497.7 979.6 504.1 986.4 512.6 987.9 513.7 988.1 514.8 988.2 515.8 988.2 523.1 988.2 529.9 984.1 533.2 977.4L998 39.8C1001.6 32.4 1000.2 23.6 994.5 17.7Z",
"width": 1000
},
"search": [
"myaddress-icon"
]
}
Copy its path value and insert it into the path of a svg like this one (set the width and height value of the svg as the width value in the config):
<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
<path d="M994.5 17.7C988.8 11.8 980 10.1 972.5 13.6L11.3 454.7C3.6 458.3-0.9 466.5 0.2 474.9S7.8 490 16.2 491.4L447.3 563.7 496.6 971.1C497.7 979.6 504.1 986.4 512.6 987.9 513.7 988.1 514.8 988.2 515.8 988.2 523.1 988.2 529.9 984.1 533.2 977.4L998 39.8C1001.6 32.4 1000.2 23.6 994.5 17.7Z"/>
</svg>
and save it as a .svg file.
Lastly, you can open it with an image editor (I use inkscape) and adjust the vectorial image to the viewbox.
And you can use it as a background.

Just convert the image <glyph> to a <path>.
Remove all glyph attributes like unicode.
add transform and scale to actually showing the element at a decent size
You can play around with the size of the icon width transform='scale()' on the path element.
I chose to use 200px as its size (approximately)
Then you can just use it inside the url();
.svgback {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><path transform='scale(0.2) translate(0 200)' d='m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z'/></svg>");
width: 200px;
height: 200px;
}
<div class="svgback"></div>
<!-- Image data -->
<!--svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2015 by original authors # fontello.com</metadata>
<path transform='scale(0.2) translate(0 200)' d="m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z"
/>
</svg-->

Resources