svg-symbol-sprite

SVG Symbol Sprite

Create an SVG symbol sprite from your SVG files.

A Node.js CLI tool which creates an optimized SVG symbol sprite out of a folder full of SVG files.

Provides handy defaults so you don't have to waste time.

All available options can be tweaked. You can even supply your own SVGO config.

This tool is heavily inspried by sprite.sh

Installation

npm i svg-symbol-sprite -g

# or

yarn global add svg-symbol-sprite

Options

Argument	Description
-i, --input	Specifies input dir (current dir by default)
-o, --output	Specifies output file ("./sprite.svg" by default)
-v, --viewbox	Specifies viewBox attribute (parsed by default)
-p, --prefix	Specifies prefix for id attribute ("icon-" by default)
-c, --config	Absolute path to the SVGO config file

Usage: svg-symbol-sprite [options]

Options:
    -i, --input     Specifies input dir (current dir by default)
    -o, --output    Specifies output file ("./sprite.svg" by default)
    -v, --viewbox   Specifies viewBox attribute (parsed by default)
    -p, --prefix    Specifies prefix for id attribute ("icon-" by default)
    -c, --config    Absolute path to the SVGO config file

Usage as a package.json script

The tool can be also used as a package.json script. You need to add it to the devDependencies of your project's package.json.

{
	"scripts": {
		"svg-sprite": "svg-symbol-sprite -i ./assets/svgs -o ./dist/sprite.svg"
	}
}

npm run svg-sprite

# or

yarn svg-sprite

Usage without installation (with npx)

The tool can be also used without installing it:

npx svg-symbol sprite -i ./assets/svgs -o ./dist/sprite.svg

SVG Optimization

svg-symbol-sprite optimizes the input SVG files using SVGO and an opinionated configuration file. In order to customize the SVGO config, one can do so by using the -c or --config option and an absolute path to the SVGO config file.

Accessibility

svg-symbol-sprite does not help with SVG icons' accessibility. This is your responsibility as a developer - you should make sure that your SVGs contain relevant title and id attributes.

Support this project

LICENSE

MIT