search

jaywcjlove / svgtofont

Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font.
https://jaywcjlove.github.io/svgtofont
MIT License
538 stars 85 forks source link

Attribute fill-rule seems to be ignored #79

Closed vitto closed 1 year ago

vitto commented 3 years ago

I'm trying to build a font with some svg exported from Figma, as flatten shape, when I export it from Figma it generates this svg as a terminal icon:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6ZM4 6H6V8H4V6ZM14 6H8V8H14V6ZM4 10H10V12H4V10ZM20 6H16V8H20V6Z" fill="black"/>
</svg>

When I use it to build the font, no errors are thrown, but when I try to see the icon it is show like fill-rule="evenodd" is ignored, resulting like this svg:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M2 6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6ZM4 6H6V8H4V6ZM14 6H8V8H14V6ZM4 10H10V12H4V10ZM20 6H16V8H20V6Z" fill="black"/>
</svg>

Would it be nice if this can be fixed.

It seems to be an existing problem also for other libs: https://github.com/nfroidure/svgicons2svgfont/issues/62

vitto commented 3 years ago

I found a workaround from Figma for it in case someone need to fix it with Fill Rule Editor plug-in, but it would be nice if there is an automatic way to fix it.

jaywcjlove commented 3 years ago

@vitto Some attributes converted to font svg are lost.

schmidt-oliver commented 1 year ago

Hi @vitto, please try using SVGFixer to outline the icons before converting them to font. Or use a figma plugin to change the winding rule from even-odd to non-zero.

jaywcjlove commented 1 year ago