Creating Icon Font from SVG Files
A several years ago I started building a little PWA and chose Bootswatch 3.3.5. for theming. As it depends on Bootstrap I was able to use the icons from Bootstrap. At the beginning I needed only a handful of these icons, but with the time it became more and more difficult to find the right one, because the Bootstrap Glyphicons in version 3 included only around 250 icons and there was not always the right one. Also, the app was always lugging around well over 100 KB of extra files, of which I actually only needed a few kilobytes.
In another project I had used Fontello, where you can build and download your own icon font from a selection of available icons. Very nice, but I didn’t feel like fiddling with project-specific configuration files on the Fontello website. But since you could upload your own SVG files in Fontello, which were then taken over into the font, the same had to work somehow with a Node.JS plugin!?
And yes gulp-iconfont from Nicolas Froidure was exactly what I needed.
First Solution
Just copy a bunch of SVG files in a folder, run gulp and there was my own customized icon font with a tolerable size of around 20 kilobytes. At that time, Thomas Jaggi had taken care of the creation of a CSS file with the correct code points that matched the font with his tool gulp-iconfont-css.
Setup
First I needed some SVG files…
1 | |-- Images |
… and the NPM packages of my task runner gulp.js:
1 | npm install --save-dev gulp-iconfont |
For generating the CSS file a template called _icons.css
is shipped with the NPM package of gulp-iconfont-css, which can be customized as needed. In my case I just made a copy into a folder called Templates
, where I store all other template files I need for my PWA.
1 | @font-face { |
As I was using Gulp for building my app, I had to integrate a new task for creating the icon font in the gulpfile.js
:
1 | var iconfont = require('gulp-iconfont'), |
I little explanation on that … First of all the task for gulp-iconfont-css has to be inserted before piping the files through gulp-iconfont, in order to create the CSS file properly. Following options were used:
gulp-iconfont-css
Option | Description |
---|---|
fontName |
Name that the generated font will have |
path |
Path to the template for generating CSS file |
targetPath |
Path where the CSS file will be generated |
fontPath |
Path to the icon font file |
gulp-iconfont
The library combines some other projects such as svgicons2svgfont, gulp-svgicons2svgfont and gulp-svg2ttf to create the different font formats, because its just a wrapper around them.
Option | Description |
---|---|
formats |
Font file formats that will be created |
fontName |
Name of the font (for svgicons2svgfont) |
fontHeight |
Minimum height on scaling icons |
normalize |
Normalize icons by scaling them to the height of the highest icon (for svgicons2svgfont) |
prependUnicode |
Prefix files with their automatically allocated unicode code point (for gulp-svgicons2svgfont) |
timestamp |
Get consistent builds when watching files (for gulp-svg2ttf) |
Output
After running gulp build
all files needed were generated:
1 | |-- Build |
1 | @font-face { |
All I had to do now, was to reference the new CSS file in my HTML and decorating my HTML tags with one of the new icon
-classes. Yes! My had my own icon font, just by copying some SVG files in a folder…
The Problem
A while later, as my app grew, I needed some new icons, but in the meantime I had used the content codes elsewhere in static CSS files, for example with other pseudo-selectors like AFTER.
1 | .my-special-link::after { |
After copying a few new icon files to the SVG folder and running the build, I found that most of the icons didn’t fit anymore!?
After a short research it was clear to me what had happened. With the insertion of the new SVG files, the order of the files in the folder was changed. But since the libraries processed this folder in alphabetical order, file by file, and simply incremented the codes to be assigned, the codes had simply shifted.
In the example above, this can be easily understood if we insert a file named cloud.svg here. The code for cancel.svg (E002
) remains untouched, but cloud.svg now gets E003
and delete.svg E004
and so on. The hardwired icon for .my-special-link
(E006
) now showed instead of the link icon a flag icon.
Newer Solution
I don’t know when this happened, because I don’t keep a constant eye on my little PWA and thus the further development of the related tools, but after having manually adjusted the moved codes two or three times now and once again wanting to change a few things on the PWA’s icons, I had enough and came across the following sentence on the gulp-iconfont-css page on GitHub:
--- backflip (Thomas Jaggi)Recent versions of gulp-iconfont emit a glyphs (or codepoints < 4.0.0) event (see docs) which should likely be used instead of the workflow described below. However, it will continue to work as expected.
Ahh, ok. I don’t need the gulp-iconfont-css anymore. I can create the CSS file by myself. Lets see how the gulp-iconfont task looks, after rewriting:
1 | var iconfont = require('gulp-iconfont'); |
First I have introduced a new fontObj
variable to hold all informations for the untouched CSS template. The major difference is now, that iconfont
is the only main task, with a subtask where the glyphs are processed directly via consolidate
. The mapGlyphs()
function ensures that the file names with the CodePoints are transferred into an easily usable structure.
Works fine, but doesn’t solve my problem with the shifted CodePoints, when inserting new SVG icons … but someone remarked in a StackOverflow article to have a look at the test files of gulp-iconfont. There, the SVG files carry as prefix the name of the CodePoints to be used for this file!. Unfortunately, this feature is not documented, but it works…
1 | |-- Images |
Now the order of the SVG files doesn’t matter anymore. I just copy a new SVG file into the folder and rename it with a currently unused Unicode.
Upcoming Solution: Using SVG Sprites
Interestingly, the inventor of gulp-iconfont page writes on the GiHub page:
--- Nicolas Froidure (nfroidure)Warning: While this plugin may still be useful for fonts generation or old browser support, you should consider using SVG icons directly. Indeed, when i created gulp-iconfont and all its related modules, using SVG icons was just not realistic for a wide browser suppport but i was already conviced that SVG was the future, that’s why i wanted my SVG source files to sit separated in a folder. So, now, just enjoy switching to SVG with almost no effort :). Was a great open source journey with you all!
This goes along with some older articles of Chris Coyer from CSSTricks:
- https://css-tricks.com/svg-sprites-use-better-icon-fonts/
- https://css-tricks.com/svg-symbol-good-choice-icons/
- https://github.com/w0rm/gulp-svgstore
Maybe it’s time to say goodbye to icon fonts completely and use SVG files directly, but in my opinion this is not suitable for all needs. Especially if you work a lot with pesudo selectors, a general rebuild of the code and the UI will be necessary and you would do well to weigh the cost-benefit carefully.
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts or by replying to its syndication on Twitter, which will also be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
Webmentions
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...
Comments