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.

Ultimately the illustrator file name becomes a prefix for the icon object ids in the production svg file. So it's a good idea to keep the filename short, and to avoid spaces in the file name.

The artboard names are used in the exported SVG file names, which are in turn used as the object ids of the icons within the final production SVG. It's a good idea to avoid spaces in the artboard titles, and to keep them as short as possible.

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