webpack-svgstore-plugin
Installation
npm i webpack-svgstore-plugin --save-dev
Usage
1) require plugin
//webpack.config.js
var SvgStore = require('webpack-svgstore-plugin');
module.exports = {
entry: {
app: path.join(_path, 'platform', 'static', 'js', 'index.js'),
},
plugins: [
new SvgStore(
//=========> input path
[
path.join(sourcePath, 'svg', '**/*.svg'),
'!' + path.join(sourcePath, 'svg', 'excludeFolder', '**/*.svg'),
],
//=========> output path
'svg',
//=========> options
{
name: '[hash].sprite.svg',
chunk: 'app',
baseUrl: '//path-to-cdn:port/',
prefix: 'myprefix-',
svgoOptions: {
plugins: [
{ removeTitle: true }
]
}
}
)
]
}
2) html code for happy using
<svg class="svg-icon">
<use xlink:href="#icon-name"></use>
</svg>
Plugin settings
input path
- path to folder with svgs, use globby patterns
output path
- path to output folder, begins with webpack
publicPath
options
name
- sprite namechunk
- add xhr to entry point chunk (optional)baseUrl
- server where the sprites are stored, for example a CDN (optional)prefix
- add prefix to svg id's (optional, default:'icon-'
)svgoOptions
- options for svgo (optional, default:{}
)
License
NPM package available here: webpack-svgstore-plugin
MIT © Chernobrov Mike, Gordey Levchenko