Icon sheet with GRATUITOUS pixelmator effects 

Building icon fonts with Grunt

Learn how to generate your icon web fonts

In this post I will try to explain how to use Grunt.js to automate the creation icon fonts from SVG or EPS files.

Grunt defines itself as a task runner for less work with repetitive tasks. It delivers, big time.

Grunt can minify, compile, concatenate and test your code with minimal effort. My current workflow relies on it heavily, handling:

• Sass compiling
• CoffeeScript compiling
• Javascript minification and concatenation
• Images Compression
• Inject those changes on the browser with LiveReload

Recently, i’ve learned how to use it to build icon fonts, and I would like to share with you how to do it.

In this post we’ll look into:

What you’ll need

• Grunt, obviously
• Grunt-Webfont Plugin

Grunt and Grunt-Webfont plugins have their own dependencies. Both have detailed instructions, but I’ll explain the essential steps bellow.

A note for Windows users: These instructions were written in the context of Mac OSX, i’m not familiar on how it works on Windows, you’ll have to check the resources websites, which I also include bellow.

Let’s start building those icons.

Step 1 — Collect your icons

The first thing to do is preparing the icons grahics, Grunt-Webfont will take SVG or EPS images. You can design your own icons with almost any graphic editor. My personal choice is Sketch. If you’re on a Mac and work with interface or icon design, I’ll strongly suggest you to give a go.

Another option is to pick your icons from existent collections. For that purpose, two of the sites I use most frequently are: * IconMonstr * The Noun Project

Usually I place them in a Sketch file, which I use to standardize their sizes and alignments.

This is optional, you can probably get away with just shove the files in the source directory grunt will use.

Step 2 — Set up Grunt

The Getting Started Guide on Grunt’s website has everything you need to know to get started, still, to make things simpler, let’s abbreviate it to the indispensable steps. Install the Grunt dependencies and utilities as described on the guide, then:

package.json

Create this file on the root of your project folder, containing:

{
 “name”: “my-project-name”,
 “version”: “0.1.0",
 “devDependencies”: {
 “grunt”: “~0.4.1",
 “grunt-contrib-jshint”: “~0.1.1",
 “grunt-contrib-nodeunit”: “~0.1.2"
 }
}

This file will automatically be updated each time you install or update a Grunt plugin.

Next up, setup a base Gruntfile:

Gruntfile.js

This is where you will need to define your plugins configuration.

The basic file structure for the Grunfile.js (please note the capital C) is:

module.exports = function(grunt) {
 // Project configuration.
 grunt.initConfig({
 pkg: grunt.file.readJSON(‘package.json’),

 // PLUGINS CONFIG
 }
});

// Load the plugin that provides the “uglify” task.
// grunt.loadNpmTasks(‘pluginname’);

// Default task(s).
// grunt.registerTask(‘default’, [‘taskname’]);

};

Open the project root in Terminal and execute the command npm install. This will pull from NPM (Node Package Manager) all the dependencies listed on package.json

Now that we have the base framework in place, let’s install Grunt-Webfont.

Every Grunt plugin usually follows a “convention” for documenting how to install and use it. Grunt-Webfont is no exception and it’s Documentation includes detailed information about the installation process and configuration options.

Note: Grunt-webfont itself it’s based on the Font Custom project, visit the project site to know in more detail what it does. We’re basically automating the process described there.

So, to install Grunt-Webfont dependencies will write in terminal:

brew install fontforge ttfautohint

Then:

brew install https://raw.github.com/sapegin/grunt-webfont/master/Formula/sfnt2woff.rb

And finally, we’ll install the Grunt plugin:

npm install grunt-webfont —save-dev

We now have to instruct Grunt on how we plan to use the plugin. So we’ll go back to Gruntfile.js

Gruntfile.js

First will load our plugin by adding at the end to file (look for the similar code in the file we’ve setup before):

grunt.loadNpmTasks(‘grunt-webfont’);

Then let’s set our options for building the icon font. The most basic configuration is:

webfont: {
 icons: {
 src: ‘icons/*.svg’,
 dest: ‘build/fonts’
 }
}

This will tell Grunt to pick every SVG file on the icons/ folder and create the webfont resources inside the folder build/fonts. It just that simple. You can change the paths as you like.

Let’s see how the Grunfile.js should look at this point:

module.exports = function(grunt) {
 // Project configuration.
 grunt.initConfig({
 pkg: grunt.file.readJSON(‘package.json’),

 webfont: {
 icons: {
 src: ‘icons/*.svg’,
 dest: ‘build/fonts’
 }
 }
 }
});

// Load the plugin that provides the “uglify” task.
grunt.loadNpmTasks(‘grunt-webfont’);

// Default task(s).
// grunt.registerTask(‘default’, [‘webfont’]);

};

Because I use Sass, there’s some additional options needed:

webfont: {
 icons: {
 src: ‘icons/*.svg’,
 dest: ‘build/fonts’,
 destCss: ‘build/css’,
 options: {
 stylesheet: ‘scss’,
 relativeFontPath: ‘/build/fonts’
 }
 }
}

It’s worth exploring all the available options for this plugin.

Step 3 — Build it

If all went well, you’re almost done. In Terminal, at the project root folder, run grunt webfont. This will tell Grunt to run that specific task. You can configure it in such a way that the task will automatically run each time you change any icon image. I won’t go into that in this post, but I will describe it in a future post.

If you want to search on that subject, you’ll just need to look for a watcher for file changes, and the livereloading feature.

My suggestions for those are: * Grunt Regarde to watch for file changes * LiveReloadInject changes in your browser

In a future post I will explain what I see as an advantage to this approach, compared to the use of web services like IcoMoon.