SVG Symbol Sprite

> Create an SVG symbol sprite from your SVG files.

!GitHub stars
!GitHub forks
!GitHub watchers
!GitHub followers

Code stats

!GitHub code size in bytes
!GitHub repo size
!GitHub language count
!GitHub top language
!GitHub last commit

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

``sh
npm i svg-symbol-sprite -g

or

yarn global add svg-symbol-sprite
`

Options

| Argument | Description | Default value |
| ----------------- | ------------------------------------------------ | ------------------------------------------ |
| -i, --input | Specifies input dir | "." (current directory) |
| -o, --output | Specifies output file | "./sprite.svg" |
| -v, --viewbox | Specifies viewBox attribute | (parsed from each icon) |
| -p, --prefix | Specifies prefix for id attribute | "icon-" |
| -c, --config | Absolute path to the SVGO config file or "false" | - |
| -a, --attrs | Attributes for the SVG element | "aria-hidden="true"" |
| -s, --style | Inline style for the SVG element | "width: 0; height: 0; position: absolute;" |

`sh
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 or "false"
-a, --attrs Attributes for the SVG element ('xmlns="http://www.w3.org/2000/svg" aria-hidden="true"' by default)
-s, --style Inline style for the SVG element ("width: 0; height: 0; position: absolute;" by default)
`

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.

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

`sh
npm run svg-sprite

or

yarn svg-sprite
`

Usage without installation (with npx)

The tool can be also used without installing it:

`sh
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.

If you wish to completely disable the SVGO files optimization, pass "false" to the --config option.

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.

LICENSE

MIT

---

 



 



 



 



 



 



 



 



 



 



 

---

Support and sponsor my work: