This repository has been archived on 2025-12-28. You can view files and clone it, but cannot push or open issues or pull requests.
simple-blog-api/posts/2021-07-28_work-related_Icons SVGs Fonts and Icomoon.md
2021-08-24 10:02:54 +09:30

1.6 KiB

Icomoon for Icon Managament

Icons, SVGs, Fonts, and Icomoon.

Cover background, note that at work we are using fluent Icons and the supplied font file is 2mb which is rediculous.

I was tasked with finding a solution, we had started using prime icons as we are using primeng for the project.

This lead me to looking at how primetek handle their icons.

an ironic note is that I end at the solution primetek use - as far as I can see - but not right away.

I noticed the use of some clever CSS font work, creating a tag and prepending it with a specific character of a font, which just happens to be an icon.

insert details here about how the solution works in short

This lead me to looking at solutions for converting a collection of SVGs to a singular font file. Microsoft provides SVG copies of all of the fluent icons on github. Turns out this is not an easy task to do without a large amount of work. Originally we had wanted an in house solution to complete this conversion. But alas.

Realising that completing the conversion (on a short timescale without a lot of work), I started looking at online solutions and came across Icomoon. This was after quite some searching. I had not seen any suggestion of using such a site anywhere.

Upon uploading some test icons and downloading the font file I realised that I had stumbled upon the very same solution that primetek was using for prime-icons, give or take some small changes that they have made to make things better for their users.

And as such, I had found our solution.

Icomoon is really a magical black box but what it produces is brilliant.

detail in long how solution works