Icons With SVG Sprites

Overview

The goal is to create a single .svg file containing all the icons that will be used on a website.

Creating the icons

Save all the icons in a single Illustrator document.

Each icon is in its own layer, and each icon is placed on its own artboard.

Exporting the SVG

• File > Export...
  • Select a location that is inside the web project, but separated from the production files, e.g. /images/icons/src/.
  • Format: SVG (svg)
  • Use Artboards: checked
  • With the Use Artboards option checked, separate .svg files are created for each artboard in the Illustrator file.
  • The icon file names are the following format: [IllustratorFileName]_[ArtboardName].svg
  • Using gulp-svgstore to combine the SVG files, these file names are used as the object ids within the final SVG file. So spaces in artboard names are not a good idea.
• SVG Options dialog
  • Styling: Internal CSS
  • Font: SVG
  • Images: Preserve (presumably there are no embedded images)
  • Object IDs:' Layer Names
    (This setting is important. These are the object ids that will be used to reference the individual icons in HTML.)
  • Decimal: 4
  • Minify: checked
  • Responsive: checked