Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blivesta/svgpack
A tool for generating and managing SVG Sprites.
https://github.com/blivesta/svgpack
nodejs svg svg-icons svg-sprites
Last synced: about 2 months ago
JSON representation
A tool for generating and managing SVG Sprites.
- Host: GitHub
- URL: https://github.com/blivesta/svgpack
- Owner: blivesta
- License: mit
- Created: 2015-10-09T19:07:01.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-12T15:28:08.000Z (over 7 years ago)
- Last Synced: 2024-10-13T15:51:50.871Z (2 months ago)
- Topics: nodejs, svg, svg-icons, svg-sprites
- Language: JavaScript
- Homepage:
- Size: 98.6 KB
- Stars: 29
- Watchers: 4
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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 | -m templateHtml | -c templateCss | -s templateSprite]
```
#### Options:
- `--name`, `-n`
- `--dest`, `-d`
- `--prefix`, `-p`
- `--base64`, `-b`
- `--templateHtml`, `-m`
- `--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
```
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.