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:
- makes it easy to manage icons and background images for all devices
- uses resolution independent SVG icons when supported
- 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.
The post Meet grunticon: a mystical CSS icon solution appeared first on The Changelog.