Reactive Sprite Workflow with Illustrator and Grunt

A good set of icons can cast a design apart and engage users. For the sharpest and most scalable graphics, SVG is king.

However, as with any asset, we have to make a request to the server to fetch them and repeatedly making these requests can get expensive. With users’ attention spans unbefitting a goldfish, and the prevalence of mobile devices, fast page loads are a necessity. So, we create a single file with any number of icons distributed inside to minimize requests — a sprite sheet.

With S/CSS we can isolate icons from the sprite and create icon classes. Furthermore, using a CSS pre-processor we can easily extend and re-use those classes anywhere.

Get On With It

At Zumba we’ve established a reactive workflow for creating and managing these icon sprite sheets, which has spared a lot of headaches. The time from designer’s screen to usable assets has shortened significantly.

While other tutorials already exist on SVG sprite automation, there always seemed to be something missing. Where does the creation of SVG icons fit into my workflow? How can changes in the design assets increase my efficiency on the development side? How can I better maintain an ever-changing sprite sheet? This tutorial includes the use of Illustrator as a crucial asset in SVG manipulation, organization and exportation.

Problems

Previously we might have manually built an sprite-sheet in illustrator from a designer’s various files, then a Sass stylesheet would be made — a class and background-position written for each icon. However, there are glaring issues with this process.

This worked assuming the sprite-sheet was small and unchanging, but as new icons were added there became a problem: if icons were repositioned in the sprite-sheet the background-property had to be rewritten for each affected icon. This was horribly tedious and error-prone. To avoid rewriting stylesheets, extended styles began getting cluttered with background-position, height and width overrides on an individual basis. This wasn’t DRY and it wasn’t FUN.

Additionally, we may have 2–3 developers working on a set of icons from a design file provided in a project’s requirements. Developers would then download that file and use it as their icon source. But what happens when our requirements change or the design file is amended? We run into fragmentation of the assets between developers. We needed a source of truth for icon source files.

The Goals

• Prevent differing versions of design documents between developers
• Automate stylesheet building
• Create more accurate, more extendable styles

The Tools

• Adobe Illustrator
• Grunt
• grunt-svg-sprite

Overview

1. Install and configure Grunt and grunt-svg-sprite
2. Use Illustrator to manage icons and create ‘master’ icon document —the master file
3. Use Illustrator to export icons into individual SVGs
4. Build our sprite-sheet and stylesheet using grunt-svg-sprite
5. Import the new stylesheet into main.scss

Getting Started (The Squeeze)

We use Grunt as our task runner. If you’re unfamiliar with it checkout how to get started.

Before we get into Illustrator design file management we should set up a simple file structure and install our tools.

/sprites
/svg
/assets
/scss
    main.scss
/css
index.html
Gruntfile.js

Individual sprites will be placed in the /svg folder and grunt-svg-sprite will compile them into a sprite-sheet to be placed in /sprites and an accompanying stylesheet to be placed in /scss.

Assuming you have Grunt set up, we should now command-line install grunt-svg-sprite using npm.

npm install grunt-svg-sprite

Configuring grunt-svg-sprite

Add the following to the config block of your Gruntfile.js:

grunt-svg-sprite config — a good start

Configuring grunt-svg-sprite can be a little tedious, but here’s the skinny.

1. We set up a working directory for grunt-svg-sprite to look for single SVGs and a destination folder for the generated Sass.
2. Our options include the dimensions of the icon in the S/CSS as width and height and dictate a 1px padding between icons in our sprite-sheet (not CSS padding).
3. mode provides us a means to declare the output type, location, names, and layout for our sprite-sheet and stylesheet. For more info see the svg-sprite docs.
4. transform : [svgo] is a plugin that will remove unnecessary elements from our SVGs and minify the sprite-sheet, reducing file size considerably. It’s included with grunt-svg-sprite by default.
5. Finally, we load our task into Grunt.

Now that we’ve set up grunt-svg-sprite, let’s put it aside for a moment and see how we can use Illustrator to organize, manage and export our icons.

Introducing Illustrator

Our design files can come in all manner of ways and we need a way to consolidate them into one manageable icon document. We usually create an icon master file for each module or project. Think of this master file as a model for which all our sprites and S/CSS classes can reference.

Creating the Master File

To start our master file we’ll need put all the icons into a single new document. The most straight-forward way to do this is to open a new file and place all the icons into it.

The goal is to isolate each icon into its own artboard. There are a few ways to do this but my preferred method is as follows:

1. Move all the icons off of the artboard.
2. Select the Artboard tool SHIFT + O
3. Draw an artboard around each icon

Creating artboards for icons

4. Name each artboard to describe the icon inside of it (these will be used as filenames and CSS class names later).

Naming artboards

Protip: You may want to fit each artboard to its icon’s bounds Object > Artboards > Fit to Artwork Bounds. It isn’t necessary but will affect the sprites dimensions when we compile our sprite-sheet later.

Admittedly, this is the manual part of the workflow, and largely avoidable if the designer organizes the document this way from the get-go. If you’re dealing with a large number of icons between many sources, this can be very helpful. Once finished, we’ll have a descriptive and organized source of truth for our sprite sheet.

A finished, organized icon document

Super Protip: Now that we’re done, we could put this master file into version control, via Git, SVN, etc. for all developers to share and amend without the possibility of fragmenting. Bonus!

Exporting the SVGs

Now that we have all of our icons organized, the magic can begin! We’ll do a batch export to SVG using our newly created artboards.

1. Select File > Save As
2. Choose the destination as the /svg folder we created earlier
3. Choose Format: SVG (svg)
4. Check Use Artboards and either check All or select a Range of artboards to export

Batch exporting artboards

Once you’ve hit Save you’ll be presented with a dialog of SVG options. Make sure your settings are as follows and hit OK:

SVG settings

After some batch exporting magic you should now be graced by an /svg folder filled with SVG icons. Wee!

Building Sprites (The Juice)

Now that we have a well-managed master file and a folder of SVGs let’s compile those suckers!

In your command-line:

grunt svg_sprite

Assuming there are no errors, grunt-svg-sprite will have compiled your individual SVGs into a single, minimized sprite-sheet and generated all the S/CSS that goes along with it. Boom.

Generated styles via grunt-svg-sprite

Now all that’s left to do is import our generated stylesheet at the top of main.scss.

@import “../scss/spritestyles”;

Now you can use or extend these icon classes as you see fit.

Wrapping Up

Suppose later on we need to add new icons to our sprite-sheet. Now, with our reactive workflow we can checkout our Illustrator master file, add a new icon and artboard and export our single SVGs again. Then, generate a new sprite-sheet and new styles with grunt-svg-sprite, without having to worry about any previous references to those icon class names throughout our site.

We’ve applied a more reactive approach to working with large batches of icons or SVG graphics. Instead of manually writing S/CSS properties on a class-by-class basis, we now alter our icons “model” and the references to those icons “react” and update.

With a few modifications to our design file and grunt-svg-sprite we’ve:

• Increased speed of iterations
• Eliminated differing design files
• Added configurability for sprite-sheets
• Increased S/CSS class reusability (DRYness)
• Increased the magnitude of high-fives