nfroidure / svgicons2svgfont

Concatenate SVG icons and ouput an SVG font
http://nfroidure.github.io/svgiconfont/
MIT License
339 stars 71 forks source link

Simple path gets filled #121

Closed ivictbor closed 3 years ago

ivictbor commented 3 years ago

Hi Nicolas! Great work👏. My company have been using packages which use your package for years and I, first of all, I want to thank you and star!

Last days I started to notice strange behavior on some simple icons.

My steps:

Created 4 simple polygons in Figma:

image

Exported to this SVG:

<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1.4H8C8.33137 1.4 8.6 1.66863 8.6 2V8C8.6 8.33137 8.33137 8.6 8 8.6H2C1.66863 8.6 1.4 8.33137 1.4 8V2C1.4 1.66863 1.66863 1.4 2 1.4ZM0 2C0 0.89543 0.895431 0 2 0H8C9.10457 0 10 0.895431 10 2V8C10 9.10457 9.10457 10 8 10H2C0.89543 10 0 9.10457 0 8V2ZM15 1.4H21C21.3314 1.4 21.6 1.66863 21.6 2V8C21.6 8.33137 21.3314 8.6 21 8.6H15C14.6686 8.6 14.4 8.33137 14.4 8V2C14.4 1.66863 14.6686 1.4 15 1.4ZM13 2C13 0.89543 13.8954 0 15 0H21C22.1046 0 23 0.895431 23 2V8C23 9.10457 22.1046 10 21 10H15C13.8954 10 13 9.10457 13 8V2ZM8 14.4H2C1.66863 14.4 1.4 14.6686 1.4 15V21C1.4 21.3314 1.66863 21.6 2 21.6H8C8.33137 21.6 8.6 21.3314 8.6 21V15C8.6 14.6686 8.33137 14.4 8 14.4ZM2 13C0.895431 13 0 13.8954 0 15V21C0 22.1046 0.89543 23 2 23H8C9.10457 23 10 22.1046 10 21V15C10 13.8954 9.10457 13 8 13H2ZM15 14.4H21C21.3314 14.4 21.6 14.6686 21.6 15V21C21.6 21.3314 21.3314 21.6 21 21.6H15C14.6686 21.6 14.4 21.3314 14.4 21V15C14.4 14.6686 14.6686 14.4 15 14.4ZM13 15C13 13.8954 13.8954 13 15 13H21C22.1046 13 23 13.8954 23 15V21C23 22.1046 22.1046 23 21 23H15C13.8954 23 13 22.1046 13 21V15Z" fill="#555555"/>
</svg>

There are no strokes only paths. In chrome and Inkscape I see it ok:

image

However, in SVG font, I see it filled:

image

Tried svgicons2svgfont versions: 9.1.1 9.0.x 5.0.x

All give same.

Expected behavior

SVG looks same

Actual behavior

I see filled icons

Steps to reproduce the behavior

Copy svg text into svg icon and run svgicons2svgfont

Debugging informations

Feature request

Feature description

Use cases

Used with vision webfont generator

ivictbor commented 3 years ago

This answer helped me: https://github.com/nfroidure/svgicons2svgfont/issues/62#issuecomment-622857042

ivictbor commented 3 years ago

This one also might be usefull https://github.com/nfroidure/svgicons2svgfont/issues/62#issuecomment-799520518

ivictbor commented 3 years ago

If someone else needs clear details on how to fix it, this post explains it also https://hinty.io/brucehardywald/how-to-generate-a-webfont-automated-setup/ 😉