webpack svgstore plugin

Package info

Installation

npm i webpack-svgstore-plugin --save-dev

Usage

1) require plugin

//webpack.config.js
var SvgStore = require('webpack-svgstore-plugin');
module.exports = {
  plugins: [
    // create svgStore instance object
    new SvgStore({
      // svgo options
      svgoOptions: {
        plugins: [
          { removeTitle: true }
        ]
      }
    })
  ]
}

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-svgstore-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

  <svg class="svg-icon">
    <use xlink:href="#icon-name"></use>
  </svg>

Plugin settings

options

• template - add custom jade template layout (optional)
• svgoOptions - options for svgo (optional, default: {})

template

Default PUG template looks like:

svg&attributes(svg)
  
  mixin parseObject(obj)
    each child in obj
      if child !== null && child.type === 'text'
        | <![CDATA[#{child.data}]]>
      else if child !== null && typeof child.children === 'object'
        | #[#{child.name}&attributes(child.attribs) #[+parseObject(child.children)]]

  if defs.length
    defs
      each def in defs
        | #[#{def.name}&attributes(def.attribs)  #[+parseObject(def.children)]]

  each symbol in symbols
    | #[#{symbol.name}&attributes(symbol.attribs) #[+parseObject(symbol.children)]]

You can override template, via plugin settings:

new SvgStore({
  template: '_path/to/your/template.pug'
})

License

NPM package available here: webpack-svgstore-plugin

MIT © Chernobrov Mike, Gordey Levchenko