75 lines
3.9 KiB
Markdown
75 lines
3.9 KiB
Markdown
# Icomoon for Icon Managament
|
|
|
|
## Icons, SVGs, Fonts, and Icomoon.
|
|
|
|
Early in the year I, for a project at work, was tasked with coming up with a solution to deal with icons. We had decided to use FluentUI icons from microsoft, but the 2Mb font file that they provide was a bit much to include in the app. So a solution was required. We wanted our solution to be easily versioned and source controlled.
|
|
|
|
After some time looking at different methods of processing font files to either parse out unwanted fonts or transpose wanted ones to a new file I realised that it was a pointless endeavour and I called it quits. At least from what I saw, fonts suck and I don't want anything to do with them. After some time feeling sorry for myself for a bit I decided to have a look at how primetek deal with their icons prime-icons, which we had considered for use but then abandoned.
|
|
|
|
> an ironic note is that I end at the solution primetek use - as far as I can see - but not right away.
|
|
|
|
### A potential solution
|
|
|
|
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.
|
|
|
|
The basics of the solution are below.
|
|
|
|
#!scss
|
|
@charset "UTF-8";
|
|
@font-face {
|
|
font-family: "icomoon";
|
|
src: url("fonts/icomoon.eot?36cs2a");
|
|
src: url("fonts/icomoon.eot?36cs2a#iefix") format("embedded-opentype"), url("fonts/icomoon.ttf?36cs2a")
|
|
format("truetype"), url("fonts/icomoon.woff?36cs2a") format("woff"),
|
|
url("fonts/icomoon.svg?36cs2a#icomoon") format("svg");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: block;
|
|
}
|
|
[class^="my-icons-"],
|
|
[class*=" my-icons-"] {
|
|
/* use !important to prevent issues with browser extensions that change fonts */
|
|
font-family: "icomoon" !important;
|
|
speak: never;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
line-height: 1;
|
|
/* Better Font Rendering =========== */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.my-icons-icon-1:before {
|
|
content: "";
|
|
}
|
|
|
|
.my-icons-icon-2:before {
|
|
content: "";
|
|
}
|
|
|
|
Then to insert the icon where it is wanted one can simply do the following
|
|
|
|
`<i class="my-icons-icon-1"></i>`
|
|
|
|
And the icon specified as content in the scss above will sit in the place of the `<i>` tag.
|
|
|
|
### Icomoon
|
|
|
|
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 so we had easy access to all the icons we wanted in that format. 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) was totally unrealistic, I started looking at online solutions and came across Icomoon. This was after quite some searching throughout which I never heard it mentioned. I'm not sure which search term found it but I know that it was a direct search that did and not an article or forum post that lead me to it.
|
|
|
|
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/easier for their users.
|
|
|
|
### The end
|
|
|
|
And with that, I had found our solution.
|
|
|
|
Icomoon is really a magical black box but what it produces is brilliant.
|
|
|
|
Source controlling the processed files and building the font and css into an npm package that we store in a private registry worked great and we have been using the same solution since, approx. 8 months I think. If ever you need a simple way of producing your own set of easily usable icons for a project, I suggest Icomoon.
|
|
|
|
-ink.
|