webpack-vector-sprite-plugin
v1.0.4
Published
Webpack plugin to create svg sprites from independent imports
Downloads
6
Readme
WEBPACK PLUGIN
███████╗██╗ ██╗ ██████╗ ███████╗████████╗ ██████╗ ██████╗ ███████╗
██╔════╝██║ ██║██╔════╝ ██╔════╝╚══██╔══╝██╔═══██╗██╔══██╗██╔════╝
███████╗██║ ██║██║ ███╗ ███████╗ ██║ ██║ ██║██████╔╝█████╗
╚════██║╚██╗ ██╔╝██║ ██║ ╚════██║ ██║ ██║ ██║██╔══██╗██╔══╝
███████║ ╚████╔╝ ╚██████╔╝ ███████║ ██║ ╚██████╔╝██║ ██║███████╗
╚══════╝ ╚═══╝ ╚═════╝ ╚══════╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝
Package info
Installation
npm i webpack-vector-sprite-plugin --save-dev
Webpack version support
Use [email protected] for Webpack 1.x.x
Use [email protected] for Webpack 2.x.x,3.x.x,4.x.x.
Node.js version support
We do not maintain a version for node.js 0.12 anymore
Tested to work with with node.js 4.x,6.x,7.x,8.x
Webpack configuration
Usage
1) require plugin
//webpack.config.js
var SvgStore = require('webpack-vector-sprite-plugin');
module.exports = {
plugins: [
// create svgStore instance object
new SvgStore({
// svgo options
svgoOptions: {
plugins: [
{ removeTitle: true }
]
},
prefix: 'icon'
})
]
}
2) Put function mark at your chunk
// plugin will find marks and build sprite
var __svg__ = { path: './assets/svg/**/*.svg', name: 'assets/svg/[hash].logos.svg' };
// will overwrite to var __svg__ = { filename: "assets/svg/1466687804854.logos.svg" };
// also you can use next variables for sprite compile
// var __sprite__ = { path: './assets/svg/minify/*.svg', name: 'assets/svg/[hash].icons.svg' };
// var __svgstore__ = { path: './assets/svg/minify/*.svg', name: 'assets/svg/[hash].stuff.svg' };
// var __svgsprite__ = { path: './assets/svg/minify/*.svg', name: 'assets/svg/[hash].1logos.svg' };
// require basic or custom sprite loader
require('webpack-vector-sprite-plugin/src/helpers/svgxhr')(__svg__);
Dear friends...
As you know, last version has integrated ajax sprite loader. Right now, you can override that. Or create your own sprite ajax loader function.
3) HTML code for happy using
HTML:
<svg class="svg-icon">
<use xlink:href="#icon-name"></use>
</svg>
React JSX:
<svg className='svg-icon'>
<use xlinkHref='#icon-name' />
</svg>
Plugin settings
options
template
- add custom jade template layout (optional)svgoOptions
- options for svgo (optional, default:{}
)
License
NPM package available here: webpack-vector-sprite-plugin
MIT © Chernobrov Mike, Gordey Levchenko , Nadav Sinai , Zack Jackson