# svgpack
> A tool for generating and managing SVG Sprites.
Latest version **3.1.1** (published 2017-04-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install svgpack
pnpm add svgpack
yarn add svgpack
bun add svgpack
```
Provides the command `svgpack`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.1.1 |
| Published | 2017-04-05 |
| First published | 2015-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | blivesta |
| Maintainers | blivesta |
## Links
- npm: https://www.npmjs.com/package/svgpack
- Repository: https://github.com/blivesta/svgpack
- Issues: https://github.com/blivesta/svgpack/issues
- npm.io page: https://npm.io/package/svgpack
## Dependencies (8)
- [glob](https://npm.io/package/glob.md) ^7.0.3
- [svgo](https://npm.io/package/svgo.md) ^0.7.0
- [lodash](https://npm.io/package/lodash.md) ^4.9.0
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [datauri](https://npm.io/package/datauri.md) ^1.0.4
- [minimist](https://npm.io/package/minimist.md) ^1.1.2
- [html-to-json](https://npm.io/package/html-to-json.md) ^0.6.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.0.1
## Recent versions
- 3.1.1 (latest) — 2017-04-05
- 3.1.0 — 2017-04-05
- 3.0.1 — 2016-09-26
- 3.0.0 — 2016-09-18
- 2.1.0 — 2016-06-16
- 2.0.1 — 2016-04-28
- 2.0.0 — 2016-04-23
- 1.0.1 — 2016-04-15
- 0.2.2 — 2015-12-03
- 0.2.1 — 2015-12-03
- 0.2.0 — 2015-12-03
- 0.1.0 — 2015-11-27
## README
# SVGPack
[](https://www.npmjs.com/package/svgpack)
[](https://travis-ci.org/blivesta/svgpack)
> A tool for generating and managing SVG Sprites.
## Features
- Optimizes SVGs using SVGO
- Generates SVG Sprites
- Generates SVG and JSON files individually
- Generates CSS files for icon use
- Generates html report with a list of icons and output data
## Things to Note
SVGPack does not currently support `circle` and `ellipse` elements.
If your SVG file has `circle` and `ellipse` elements, you will need to convert these into `path` elements.
You can use Illustrator's `Make Compound Path (⌘ + 8)` function to convert circles and ellipses into paths.
## Generate with SVGPack
- [Flexicon](http://git.blivesta.com/flexicon/) [ [repository](https://github.com/blivesta/flexicon) ]
## Getting started
### Install
```
$ npm install svgpack
```
For command-line access install the npm package globally as well.
```
$ npm install svgpack -g
```
### Usage
```js
var Svgpack = require('svgpack')
var src = './input/*.svg' // input files *You can also use glob pattern.
var svgpack = new Svgpack(src, { /* options */ })
svgpack.init()
```
#### Arguments:
```js
Svgpack(src, options)
```
0. `src`: `'String'` | `[Array]`
0. `options`: `{Object}` => `optional`
#### Options:
```js
{
name: 'svgpack',
dest: './svgpack',
prefix: 'icon', // prefix for css classes
base64: false,
templates: {
// default templates files ->
// https://github.com/blivesta/svgpack/tree/master/templates
sprite:'./your-project/svgpack-template/svg/sprite.svg',
css:'./your-project/svgpack-template/css/svgpack.css',
html:'./your-project/svgpack-template/html/default.html',
},
svgoOptions: {},
}
```
### CLI
#### Usage:
```
$ svgpack [src] [ -d dest | -n name | -p prefix | -t templateHtml | -c templateCss | -s templateSprite]
```
#### Options:
- `--name`, `-n`
- `--dest`, `-d`
- `--prefix`, `-p`
- `--base64`, `-b`
- `--templateHtml`, `-t`
- `--templateCss`, `-c`
- `--templateSprite`, `-s`
## Example
1.Create SVG files.
```
|-- svg
|-- icon1.svg
|-- icon2.svg
|-- icon3.svg
|-- icon4.svg
```
2.Create `input.js`
```js
var Svgpack = require('svgpack')
var src = './svg/*.svg'
var dest = './output'
var svgpack = new Svgpack(src, { /* options */ })
svgpack.init()
```
3.Call the `svgpack`.
```
$ node input.js
```
4.Result:
```
|-- input.js
|-- svg
|-- icon1.svg
|-- icon2.svg
|-- icon3.svg
|-- icon4.svg
|-- svgpack
|-- index.html
|-- svgpack.css
|-- svgpack-sprite.svg
|-- svgpack.json
|-- data
|-- icon1.json
|-- icon2.json
|-- icon3.json
|-- icon4.json
|-- svg
|-- icon1.svg
|-- icon2.svg
|-- icon3.svg
|-- icon4.svg
```
## Markup Example
```html
Star
Heart
```
SVG Sprite icons are supported by IE 9 browsers and above.
## Contributing
To contribute to SVGPack, clone this repo locally and commit your code.
Please check that everything works before opening a pull-request.
## License
Released under the MIT license.
---
_Source: https://npm.io/package/svgpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._