Replace webfonts-generator with something better

[magicznyleszek]

Description

We use @vusion/webfonts-generator to generate an icon font. It's almost dead project with a bug that causes the generated font to produce a broken glyphs if the SVG source file is small. So for example a vector file with 28x28px "artboard" is too small (glyphs broken), but if we use 280x280px SVGs it's fine. This is a hack that I've discovered few years ago. We use it currently.

Current workflow

A new icon is needed for UI:

1. Get the SVG code from Figma file
2. Save it as a file
3. Import it into Shared Kobo drive/Product Design/Design Current/04. Design/Comps Sketch/Icons.sketch (our old-ish Icons source file)
4. Scale it up 10 times
5. Export as new SVG file
6. Put it in /jsapp/svg-icons and commit to the repo

Workflow we want

A new icon is needed for UI:

1. Get the SVG code from Figma file
2. Save it as a file
3. Put it in /jsapp/svg-icons and commit to the repo

We also want this to work with our Icon component

Reasoning

We want to keep all our desings in Figma, and not require the hack. The Icons.sketch file (or other upscaling tool) is needed for webfonts-generator to work.

Additional details

Zulip topic

[magicznyleszek]

Some ideas:

1. Use the <use> tag:
   • See the general idea here: https://css-tricks.com/svg-use-with-external-reference-take-2/
   • It would require writing a script (or finding a package) that will generate a big SVG file with all the icons as <symbol>s and then loading it with React (or some other way)
2. SVGR:
   • this package generates a React component out of every SVG file (CloseIcon.jsx, SpreadsheetIcon.jsx etc.)
   • we would need to find a way to incorporate it nicely into our Icon component
3. We can try replacing webfonts-generator with some maintained project, e.g. https://github.com/jaywcjlove/svgtofont