Grunticon: A Grunt.js plugin for managing and delivering sharp icons to all devices
Posted by Scott on 08/31/2012
Note: Grunticon was formerly named Unicon. The name was changed on September 19, 2012.
Creating sharp-looking icons and background images in our client work has always been more complicated than we want it to be, and with the growing popularity of higher-definition screens, it's only getting harder. CSS sprites have traditionally worked alright, but they can be a pain to manage, are often difficult to use in CSS layouts, and require generating and serving multiple fixed-pixel sizes. Icon fonts are a nice too, but they cause problems in some of the popular mobile environments we need to support, they aren't easy to manage for custom-designed icons, and they're limited to a single color.
What we really want is a way to efficiently manage and serve vector icons so they'll be crisp on displays of all resolutions, while delivering them in a way that is fast and non-blocking (for performance), and with appropriate fallbacks for older devices. So we built one!
/' // . // |\//7 /' " \ . . . | ( \ | '._ ' / \'-'
Grunticon is a Grunt.js task that efficiently manages icons and background images for delivery to a variety of browsers and devices. It takes a folder of SVG files (typically, icons that you've drawn in an application like Adobe Illustrator), and outputs them to 3 CSS files containing CSS for the icons with class names that match the file that generated them. The CSS files contain the icons in the following formats:
- All of the icons inline in the CSS as vector SVG data URLs,
- All of the icons inline in the CSS as PNG data URLs,
- All of the icons referenced externally as PNG images, which are automatically generated from the source SVG and placed in a directory alongside the CSS files.
You can see an example of the files that grunticon uses and creates by browsing the Grunticon project's example folder. The
source directory contains the SVG icon source files, and the
output folder contains the files that Grunticon creates.
You can also view a demo of the icon output, with the Grunticon loader in-place, here: Grunticon Output Preview
Grunticon is a Grunt.js task, and it also uses PhantomJS, a headless WebKit browser, for rendering the SVG files into various formats. Both of these are open-source command-line tools that can be installed following the instructions on the Grunt.js documentation. Once you have Grunt installed, you can get Grunticon via NPM, the Node.js package management utility.
Once installed and configured with Grunt.js, Grunticon will run alongside your other Grunt tasks whenever you run Grunt itself. Its configuration is fairly simple, requiring a
src directory, containing your SVG files, and a
dest directory that you'd like Grunticon to export the icons to.
For installation steps, check out the Grunticon readme.
If you have ideas or thoughts on the tool, the direction of the project, or would like to help contribute, just drop us a note here or in the issue tracker. Enjoy!