Converts SVG Strokes To Fill.
npm install oslllo-svg-fixer
š v3.0.0 Is now 11x faster thanks to @ericfennis, see #89.
š v2.0.0 Removed Canvas & JSDOM no more slow npm install cycles.
Attempts to fix your svg by turning it into a fill / single path (and making it font compatible as a bonus).
---
---
See the full installation and usage documentation HERE.
I wanted to convert some svg icons to fonts using tools like icomoon.io, fontello.com and webfont
If your svg containts strokes or any tags besides a single path e.g polygon rect line etc, you will get these errors when trying to convert them into fonts.
---
##### SVG
Icon -> we will be using in this example
Code -> for the icon
``xml`
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
---
When we try to convert this SVG into a font using one of these SVG To Font conversion tools we get the following errors.
| icomoon.io error | fontello.com error | webfont error |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
|  |  |  |
What happends if you ignore these errors? well, the font pack with the icon(s) will come out "corrupt/incorrect", different than expected or not even render at all (blank).
> The icon not showning up or rendering in the font pack when we ignore the errors and just create the font anyway.
| icomoon.io blank | fontello.com blank | webfont blank using fontdrop.info to preview the font |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|  |  |  |
I created this package to solve this issue, now you can "fix" svg icons to make then font compatable by running them through SVGFixer.
The icon in a font pack after we run it through SVGFixer().
| icomoon.io fixed | fontello.com fixed | webfont fixed using fontdrop.info to preview the font |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|  |  |  |
---
`xml``
---