spritesh
A Node.js script to build a SVG sprite from a folder of SVG files (typically icons).
Install
npm install spritesh -g
gem install spritesh
Or you know, you can also just copy the script.
Usage
Usage: spritesh [options]
Script to build a SVG sprite from a folder of SVG files.
Options:
-h, --help Shows this help
-q, --quiet Disables informative output
-i, --input [dir] Specifies input dir (current dir by default)
-o, --output [file] Specifies output file ("./sprite.svg" by default)
-v, --viewbox [str] Specifies viewBox attribute (parsed by default)
-p, --prefix [str] Specifies prefix for id attribute (none by default)
Examples
-
Generate
sprite.svg
from SVG files in current folder (all defaults).spritesh -
Generate
sprite.svg
from SVG files inassets/images/icons
.spritesh --input assets/images/icons -
Generate
_includes/icons.svg
from SVG files in current folder.spritesh --output _includes/icons.svg -
Generate
sprite.svg
from SVG files in current folder with a view box of0 0 16 16
.spritesh --viewbox "0 0 16 16" -
Generate
sprite.svg
from SVG files in current folder withid
attributes prefixed withi_
.spritesh --prefix i_
SVG Optimisation
spritesh is a teeny tiny Bash script that takes care of SVG files concatenation; it does not perform any SVG optimisation. I recommend you add svgo (or similar tool) to your workflow to have an optimised and efficient SVG sprite.
An example that starts with improving the SVG files, then build a sprite could be:
svgo -f assets/images/icons && spritesh -i assets/images/icons
Accessibility
spritesh doesn’t help with SVG icons accessibility in itself. It is the responsibility of the developer (a.k.a you) to make sure the original icon files are including the relevant accessibility bits: a <title>
tag with and id
attribute.
For instance, a logo.svg
icon could look like this:
<svg …> <title id="icon-brand-name">Your company/product name here</title> <!-- SVG content --></svg>
Which will generate this sprite (where icon-
is the --prefix
option):
<!-- sprite --><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="icon-brand" viewBox="0 0 20 20"> <svg …> <title id="icon-brand-name">Your company/product name here</title> <!-- SVG Content --> </svg> </symbol> <!-- Other symbols --></svg>
Later on, when using the sprite through <svg>
/<use>
, add an aria-labelledby
attribute to the <svg>
element referencing the relevant <title>
id.