https://github.com/scriptex/svg-symbol-sprite
A script to generate a symbol sprite from SVG files
https://github.com/scriptex/svg-symbol-sprite
sprite-generator spritesheet svg-icons svg-sprites
Last synced: 10 months ago
JSON representation
A script to generate a symbol sprite from SVG files
- Host: GitHub
- URL: https://github.com/scriptex/svg-symbol-sprite
- Owner: scriptex
- License: mit
- Created: 2021-12-03T10:17:22.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-05-02T11:44:26.000Z (10 months ago)
- Last Synced: 2025-05-12T02:43:45.020Z (10 months ago)
- Topics: sprite-generator, spritesheet, svg-icons, svg-sprites
- Language: TypeScript
- Homepage: https://atanas.info/portfolio/open-source/svg-symbol-sprite
- Size: 1.12 MB
- Stars: 17
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://github.com/scriptex/svg-symbol-sprite/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/svg-symbol-sprite/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/svg-symbol-sprite&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-svg-symbol-sprite-master)
[](https://www.codefactor.io/repository/github/scriptex/svg-symbol-sprite)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/svg-symbol-sprite/)
# SVG Symbol Sprite
> Create an SVG symbol sprite from your SVG files.
## Code stats
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](https://github.com/edenspiekermann/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](https://github.com/svg/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
---
Connect with me:
---
Support and sponsor my work:
