A tool for generating and managing SVG Sprites.
- 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
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.
- Flexicon [ repository ]
$ npm install svgpack
For command-line access install the npm package globally as well.
$ npm install svgpack -g
var Svgpack = require('svgpack')
var src = './input/*.svg' // input files *You can also use glob pattern.
var svgpack = new Svgpack(src, { /* options */ })
svgpack.init()Svgpack(src, options)src:'String'|[Array]options:{Object}=>optional
{
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: {},
}$ svgpack [src] [ -d dest | -n name | -p prefix | -m templateHtml | -c templateCss | -s templateSprite]
--name,-n--dest,-d--prefix,-p--base64,-b--templateHtml,-m--templateCss,-c--templateSprite,-s
1.Create SVG files.
|-- svg
|-- icon1.svg
|-- icon2.svg
|-- icon3.svg
|-- icon4.svg
2.Create input.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
<head>
<link rel="stylesheet" href="svgpack.css">
</head>
<body>
<!-- svgpack-sprite.svg -->
<svg style="display: none;" aria-hidden="true">
<symbol id="icon-star" viewBox="0 0 32 32">
<path d="M16 4.588l2.833 8.719H28l-7.416 5.387 2.832 8.719L16 22.023l-7.417 5.389 2.833-8.719L4 13.307h9.167L16 4.588z"/>
</symbol>
<symbol id="icon-heart" viewBox="0 0 32 32">
<path d="M26.996 12.898c-.064-2.207-1.084-4.021-2.527-5.13-1.856-1.428-4.415-1.69-6.542-.132-.702.516-1.359 1.23-1.927 2.168-.568-.938-1.224-1.652-1.927-2.167-2.127-1.559-4.685-1.297-6.542.132-1.444 1.109-2.463 2.923-2.527 5.13-.035 1.172.145 2.48.788 3.803 1.01 2.077 5.755 6.695 10.171 10.683l.035.038.002-.002.002.002.036-.038c4.415-3.987 9.159-8.605 10.17-10.683.644-1.323.822-2.632.788-3.804z"/>
</symbol>
</svg>
<a href="#">
<svg viewBox="0 0 64 64" class="icon" aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
Star
</a>
<a href="#">
<svg viewBox="0 0 64 64" class="icon" aria-hidden="true"><use xlink:href="#icon-heart"></use></svg>
Heart
</a>
</body>SVG Sprite icons are supported by IE 9 browsers and above.
To contribute to SVGPack, clone this repo locally and commit your code.
Please check that everything works before opening a pull-request.
Released under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent