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 [ repository ]
Getting started
Install
$ npm install svgpack
For command-line access install the npm package globally as well.
$ npm install svgpack -g
Usage
var Svgpack = var src = './input/*.svg' // input files *You can also use glob pattern.var svgpack = src /* options */ svgpackArguments:
src:'String'|[Array]options:{Object}=>optional
Options:
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
var Svgpack = var src = './svg/*.svg'var dest = './output'var svgpack = src /* options */ svgpack3.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
<!-- svgpack-sprite.svg --> 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.