search

playcanvas / pcui

UI component library for web-based tools
http://playcanvas.github.io/pcui
MIT License
664 stars 62 forks source link

Convert icon font to SVG #291

Open willeastcott opened 1 year ago

willeastcott commented 1 year ago

It's now 2023. There seems to be a reasonably strong consensus that icon fonts are inferior to SVG. For example, see the following for justification:

https://getdevdone.com/blog/icon-fonts-vs-svg-icons.html https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/

Maksims commented 1 year ago

Well, all icons are loaded in a single network request from a font. While SVGs would need to make requests per icon, until it hits the cache for each of them, it is definitely downside.

Also, in our case we have a lot of repetitive usage of same icons, which makes SVG inlining - not viable as it will bloat the download sizes, and require re-interpretation of larger HTML again and again. Not even mentioning inserting inline icons from JS.

And it is easy to use CSS, which then can use content to switch between icons based on styles for font icons. With SVGs it is less convenient and more cumbersome.

While font icons might give limitations in what icons are available and more difficult to author new ones, unless you own the font source. This has some benefits ensuring there is consistency and simplicity for the icons.

willeastcott commented 1 year ago

Well, all icons are loaded in a single network request from a font. While SVGs would need to make requests per icon, until it hits the cache for each of them, it is definitely downside.

You'd build all the individual SVG icons into a single SVG 'atlas' and to render a particular icon, you specify a sub-window into the SVG. You don't load each SVG as an individual file - although the 'source files' for the icons would be individual SVGs.

Also, in our case we have a lot of repetitive usage of same icons, which makes SVG inlining - not viable as it will bloat the download sizes, and require re-interpretation of larger HTML again and again. Not even mentioning inserting inline icons from JS.

We probably wouldn't inline, but load the atlas once on the page and just reference icons where needed.

And it is easy to use CSS, which then can use content to switch between icons based on styles for font icons. With SVGs it is less convenient and more cumbersome.

Well, I'm not sure I would 100% agree there. It's actually a pain to position and size icons that come from a font. You have to fiddle around with several CSS properties that can affect icon sizing and placement....whereas with SVG, you just set the size.

willeastcott commented 1 year ago

Here's a good example of an SVG based icon set:

https://github.com/lucide-icons/lucide

So here are the source SVG icons:

https://github.com/lucide-icons/lucide/tree/main/icons

And this script builds the atlas:

https://github.com/lucide-icons/lucide/blob/main/scripts/generateSuperSVG.mjs