Meet grunticon: a mystical CSS icon solution

grunticon — yet another cool project by Filament Group — is a Grunt.js task that takes a folder of SVG files and turns them into SVG data urls, PNG data urls, and plain old PNG files to be referenced via CSS.

It also generates a snippet of JavaScript and CSS to asynchronously load the proper icon CSS depending on the browser’s capabilities. This provides some pretty big wins. It:

1. makes it easy to manage icons and background images for all devices
2. uses resolution independent SVG icons when supported
3. obviates the need for CSS sprites

Getting started with grunticon is pretty easy. All you need is PhantomJS, Grunt.js (of course), and npm. Then you:

npm install grunt-grunticon

There are some required configuration settings as well, so be sure to check out the Getting Started and Documentation sections of the project’s README.