diff --git a/posts/2021-07-28_work-related_Icons SVGs Fonts and Icomoon.md b/posts/2021-07-28_work-related_Icons SVGs Fonts and Icomoon.md new file mode 100644 index 0000000..751af3c --- /dev/null +++ b/posts/2021-07-28_work-related_Icons SVGs Fonts and Icomoon.md @@ -0,0 +1,31 @@ +# 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 +``` +