112 lines
4.0 KiB
Markdown
112 lines
4.0 KiB
Markdown
---
|
|
title: "Icons, SVGs, Fonts, and Icomoon"
|
|
date: 2021-07-28
|
|
draft: true
|
|
---
|
|
|
|
# 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
|
|
|
|
```html
|
|
<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.
|