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-',
        template: path.join('root', 'templates', 'layout.jade'),
        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 name
• chunk - 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-')
• template - add custom jade template layout (optional)
• svgoOptions - options for svgo (optional, default: {})

License

NPM package available here: webpack-svgstore-plugin

MIT © Chernobrov Mike, Gordey Levchenko