SVG icons have become a good replacement for bitmap files and font icons. Ian Feather, a Front End Developer at Lonely Planet wrote an excellent blog post about why SVG icons rule and I agree with him. Nevertheless, I didn’t find any good guides for a SVG icon build system so I decided to share my build configuration.

This build system will..

  • Minimize large SVG icons (remove Adobe Illustrator overhead), this usually results in around 70% smaller files.
  • Paint icons into multiplcolors
  • Generate inline CSS SVG styles (IE9+ support, example)
  • Generate inline CSS Bitmap styles (IE8+ support, example)
  • Generate PNG files (for those unlucky supporting IE7 and lower)
  • Generate an icons styleguide (example).

grunt build

Getting started

You need to have node.js, npm (installs with Node.js) and Grunt installed.

We will use these Grunt plugins:

Install them:

npm install grunt-contrib-clean --save-dev

npm install grunt-svgmin --save-dev

npm install grunt-grunticon --save-dev

The Gruntfile

Grunt uses Gruntfile (.js or .coffee) for build configurations.

This will be our Gruntfile.js:

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        clean: ['svg_icons/compressed', 'svg_icons/output'], //removes old data

        svgmin: { //minimize SVG files
            options: {
                plugins: [
                    { removeViewBox: false },
                    { removeUselessStrokeAndFill: false }
                ]
            },
            dist: {
                expand: true,
                cwd: 'svg_icons/raw',
                src: ['*.svg'],
                dest: 'svg_icons/compressed',
                ext: '.colors-light-danger-success.svg'
            }
        },

        grunticon: { //makes SVG icons into a CSS file
            myIcons: {
                files: [{
                    expand: true,
                    cwd: 'svg_icons/compressed',
                    src: ['*.svg'],
                    dest: 'svg_icons/output'
                }],
                options: {
                    cssprefix: '.icon-',
                    colors: {
                        light: '#ccc',
                        danger: '#ed3921',
                        success: '#8DC63F'
                    }
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-svgmin');
    grunt.loadNpmTasks('grunt-grunticon');

    // Task(s).
    grunt.registerTask('icons', ['clean', 'svgmin', 'grunticon']);

};

Setting up SVG icons

Put your SVG icons into svg_icons/raw/ directory (relative to the directory where your Gruntfile is). Give them descriptive names because these will later match your CSS styles (e.g. arrow-left, arrow-right).

Defining colors

Grunticon uses icon naming to define different colors. We can make Svgmin generate files with a custom extension, where we define what colors we need. To add a color change colors under the grunticon task and add a key/value pair like this: danger: '#ff0000'.

NB! Do not name your keys after CSS color names. Names such as red, blue or lightGray will not work.

Next add the key under Svgmin task’s ext property: ext: '.colors-danger.svg'. Colors are seperated using the - (dash) sign.

Removing icon painting

If you don’t wish to paint your icons remove the colors hash from Grunticon and under Svgmin set ext: '.svg'.

Running the task

Run the task using

grunt icons

Grunt will generate two directories – svg_icons/compressed/ and svg_icons/output/. svg_icons/compressed/ directory holds the minimzed SVG files, you can ignore this directory. All your generated icons will be in the svg_icons/output/ directory.

And that’s it! You have successfully set up your SVG icons building system.

48701406