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(path.join(sourcePath, 'svg', '**/*.svg'), path.join(distPath, 'svg'), {
      name: '[hash].sprite.svg',
      chunk: 'app',
      baseUrl: '//path-to-cdn:port/',
      prefix: 'myprefix-',
      svgoOptions: {
        // options for svgo
        plugins: [
          { removeTitle: true }
        ]
      }
    })
  ]
}

name - sprite name

chunk - add xhr to entry point chunk (optional)

baseUrl - server where the sprites are stored, for example a CDN (optional, default: 'window.location' OR window.baseUrl if set)

prefix - add prefix to svg id's (optional, default: 'icon-')

svgoOptions - options for svgo (optional, default: {})

2. HTML code for happy using

  <svg class="svg-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-name"></use>
  </svg>

License

NPM package available here: webpack-svgstore-plugin

MIT © Chernobrov Mike, Gordey Levchenko