# svg-symbol-sprite
> A script to generate a symbol sprite from SVG files
Latest version **1.5.2** (published 2024-05-10) · MIT license · 0 weekly downloads
## Install
```sh
npm install svg-symbol-sprite
pnpm add svg-symbol-sprite
yarn add svg-symbol-sprite
bun add svg-symbol-sprite
```
Provides the command `svg-symbol-sprite`.
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: no vulnerabilities; high maintenance score.
Warnings: low downloads; no types; no esm support.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 1.5.2 |
| Published | 2024-05-10 |
| First published | 2021-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=14.0.0 |
| Dependencies | 3 |
| Unpacked size | 36.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Atanas Atanasov |
| Maintainers | scriptex |
| Keywords | Sprite, SVG Sprite, SVG Symbol, Image sprite, SVG Sprite Generator, Image sprite Generator, SVG Symbol Sprite Generator |
## Links
- npm: https://www.npmjs.com/package/svg-symbol-sprite
- Repository: https://github.com/scriptex/svg-symbol-sprite
- Homepage: https://atanas.info/portfolio/open-source/svg-symbol-sprite
- Issues: https://github.com/scriptex/svg-symbol-sprite/issues
- Funding: https://github.com/sponsors/scriptex
- npm.io page: https://npm.io/package/svg-symbol-sprite
## Dependencies (3)
- [svgo](https://npm.io/package/svgo.md) ^3.0.0
- [cheerio](https://npm.io/package/cheerio.md) 1.0.0-rc.12
- [commander](https://npm.io/package/commander.md) ^12.0.0
## Alternatives
- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads
## Recent versions
- 1.5.2 (latest) — 2024-05-10
- 1.5.1 — 2024-05-10
- 1.5.0 — 2024-04-22
- 1.4.1 — 2023-09-19
- 1.4.0 — 2022-11-14
- 1.3.0 — 2022-11-10
- 1.2.2 — 2022-11-07
- 1.1.0 — 2022-09-30
- 1.0.5 — 2022-09-01
- 1.0.4 — 2022-07-12
- 1.0.3 — 2022-01-04
- 1.0.2 — 2022-01-04
- 1.0.1 — 2022-01-04
- 1.0.0 — 2021-12-06
## 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:
---
_Source: https://npm.io/package/svg-symbol-sprite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
