@microflash/spritely

Spritely

A handy Node.js CLI to generate SVG sprites

Installation

npm install -g @microflash/spritely
yarn global add @microflash/spritely

Usage

Usage: spritely [options]

Options:
  -V, --version                output the version number
  -i, --input [input]          specify input directory (default: current directory)
  -o, --output [output]        specify output file (default: "sprites.svg")
  -r, --recursive [recursive]  enable recursive traversal of input directory (default: false)
  -v, --viewbox [viewbox]      specify viewBox attribute (detected automatically, if not specified)
  -p, --prefix [prefix]        specify prefix for id attribute for symbols (default: none)
  -n, --normalize [normalize]  toggle whitespace normalization (default: true)
  -a, --a11y [a11y]            toggle accessibility mode (default: false)
  -q, --quiet                  disable verbose output
  -h, --help                   display help for command

Examples

# Generate `sprites.svg` from SVG files in the current directory
$ spritely

# Generate `icons.svg` from SVG files in the directory `/mnt/e/assets`
$ spritely --input /mnt/e/assets/icons --output icons.svg

# Generate `sprites.svg` from SVG files in the current directory with viewBox `0 0 24 24`
$ spritely --viewbox "0 0 24 24"

# Generate `sprites.svg` from SVG files in the current directory with prefix `icon-`
$ spritely --prefix "icon-"

# Generate `sprites.svg` from SVG files in the directory `/mnt/e/assets` and the directories within it
$ spritely --input /mnt/e/assets/icons --recursive true

# Generate `sprites.svg` from SVG files in the current directory with accessibility mode
$ spritely --a11y true

Optimization

Pair spritely with svgo to optimize the SVG files and generate sprites from them. A sample pipeline may look like this:

svgo -f /mnt/e/assets/icons && spritely -i /mnt/e/assets/icons

Accessibility

spritely comes with a rudimentary accessibility mode (using --a11y option) which injects a <title> tag in the symbols based on the file name.

For more control, you can add the <title> tag manually in an SVG file.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <title>Airplay icon</title>
  <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path>
  <polygon points="12 15 17 21 7 21 12 15"></polygon>
</svg>

When using the sprites, add the aria-labelledby attribute describing the content of the file.

<svg role="img" class="icon icon-airplay" aria-labelledby="icon-airplay">
  <use xlink:href="sprites.svg#icon-airplay" href="sprites.svg#icon-airplay" />
</svg>