search

Workshape / icon-font-generator

Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
MIT License
471 stars 76 forks source link

SVG not rending properly #74

Open eueddem opened 4 years ago

eueddem commented 4 years ago

Hello,

I tried to export this svg: <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#231f20}</style></defs><path class="cls-1" d="M11.5 0h1v3.99h-1zM11.5 19.99h1V24h-1zM19.99 11.5H24v1h-4.01zM0 11.5h4.01v1H0z"/><path class="cls-1" transform="rotate(-45 19.05 4.95)" d="M17.02 4.45h4.06v1h-4.06z"/><path class="cls-1" transform="rotate(-45 4.95 19.05)" d="M2.92 18.55h4.06v1H2.92z"/><path class="cls-1" transform="rotate(-45 19.05 19.05)" d="M18.55 17.02h1v4.06h-1z"/><path class="cls-1" transform="rotate(-45 4.95 4.95)" d="M4.45 2.92h1v4.06h-1z"/><path class="cls-1" d="M12 5a7 7 0 1 0 7 7 7 7 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"/></svg>

Preview: Screen Shot 2020-04-06 at 5 34 56 PM

But after export via icon-font-generator, it is rendered like this: Screen Shot 2020-04-06 at 5 32 55 PM

Any idea how to fix this? I tried SVGO, but it did not help.

Thank you for great app.

0000marcell commented 4 years ago

I'm having the exact same problem

areve commented 4 years ago

me too all my icons are wonky

areve commented 4 years ago

I've been trying other libraries and https://www.npmjs.com/package/svgicons2svgfont raised a warning saying "A fontHeight of at least than 1000 is recommended, otherwise further steps (rounding in svg2ttf) could lead to ugly results. Use the fontHeight option to scale icons."

This does fix the problem for me, I'm not sure how to set this in this package though.

BrunnerLivio commented 4 years ago

This is a duplicate issue. As @areve mentioned —height 1000 helps or see my comment on a previous issue

areve commented 4 years ago

--height 1000 fixed it for me, I suggest a warning should be added similar to the other library I mentioned.