grunticon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it's easy to use, as it generates a customizable selector referencing each icon, and doesn't use CSS sprites.

Currently, as of version 0.1.4 of this fork we are outputting 3 Stylus files and one txt that holds a list of selectors/original files. The purpose is to use Stylus to hold a file list with custom selectors for each icon, so we can import them into the 3 Stylus files and watch changes to build the final css files. The original filelist must be copy/pasted into a Stylus file that we will create and maintain separately (to avoid overwritting custom selectors). The name of the text and Stylus files can also be customized in grunt.js

grunticon also generates a small bit of JavaScript and CSS to drop into your site, which asynchronously loads the appropriate icon CSS depending on a browser's capabilities, and a preview HTML file with that loader script in place.

First, you'll need to install PhantomJS, which you might already have if you have Grunt installed (No? You'll need that too.).

Once those are installed...

Install the grunticon module with: npm install grunt-grunticon-stylus

Then add this line to your project's grunt.js gruntfile:

grunt.loadNpmTasks('grunt-grunticon-stylus');

And lastly, add the configuration settings to your grunt.js file as mentioned below. grunticon will batch your icons whenever you run $ grunt, and output the files listed above to your dest folder, which is documented below.

dest: path to the folder that grunticon will write to, relative to the grunt.js file. Ideally, this would be a folder that does not yet exist in your directory. Perhaps something like stylus/icons/.

cssdest: path to where your css files will be generated by Stylus

These can be set in your grunt.js config file, under the name grunticon, like so:

grunticon: {

src: "images/icons-source",

dest: "stylus/icons-dist"

}

The src property refers to the directory in which your SVG icons are stored. The dest property refers to the directory you'd like grunticon to create, which will contain your output files.

IMPORTANT NOTE: grunticon will overwrite any files in the dest directory if they are of the same name as a file that grunticon needs to create. For easiest results, you can set dest to a folder that does not yet exist in your directory and grunticon will create that folder, or set it to an existing folder and be sure to configure grunticon to create file names that do not already exist in that folder.

With these configuration properties set, you can add grunticon to your default tasks list. That'll look something like this:

The workflow we've been using so far involves creating a new Illustrator file with the artboard set to the desired size of the icon you want set in the CSS.

Export the artwork by choosing File > Save as... In the dialog, choose "SVG" as the format and enter a name for the file (this wil be used as your class name later, so keep it free of any disallowed CSS class characters like ., {, (, ), etc.

In the Save SVG dialog that opens up, there are lots of options. SVG has a ton of formats, so here are a few tips we've learned.

SVG Profile: Seems like SVG 1.1 Tiny is really well supported across even older mobile platforms so if you have simple artwork that doesn't use gradients or opacity this will yield a smaller and more compatible graphic. If you want to use all the fancy effects, save artwork as SVG 1.1.

Type: Convert to outline before export.

Subsetting: None, I usually convert all text to outlines ahead of time