Extract-svg-sprite-webpack-plugin NPM

extract-svg-sprite-webpack-plugin

Webpack plugin extract SVGs to separate file. Main purpose - extract images from CSS. But also works with SVGs imported from JS.

Demo

Input

.img {
  background: url('img.svg');
}

Output

.img {
  background: url('sprite.svg') no-repeat 0 0;
  background-size: 100% 104.50%;
}

Installation

npm install extract-svg-sprite-webpack-plugin

Example config

For "classic" SVG sprite you will need to setup 2 loaders: first for the SVGs, second for CSS, for generating proper styles for positioning symbol within the sprite.

const SpritePlugin = require('extract-svg-sprite-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: SpritePlugin.loader
      },      
      {
        test: /\.css$/,
        use: [
          'css-loader',
          SpritePlugin.cssLoader, /* should be right BEFORE css-loader */
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new SpritePlugin({ options })
  ]
}

Configuration

`emit`

Type: boolean Default: true

Emit sprite file.

`filename`

Type: string | Function Default: sprite.svg

File name of resulting sprite. [contenthash] token will be replaced with hash of file content.

`publicPath`

Type: string Default: null

Custom public path for sprites. By default webpack's output.publicPath will be used.

`runtimeGenerator`

Type: RuntimeGenerator

Custom runtime generator. Docs will be ASAP.

`selector`

CSS selector for generated sprite styles. By default current selector is used, but is is possible to create separate style rule with sprite styles by specifying a valid CSS selector which will be appended to current rule. Note that original background image declaration will be moved to new rule. Example for selector: '::after'':

/* Input */
.img {
  background: url('img.svg');
}

/* Output */
.img {}
.img::after {
  background: url('sprite.svg') no-repeat 0 0;
  background-size: 100% 104.50%;
}

`spriteClass`

Type: mixer.Sprite Default: mixer.Sprite

Custom sprite class. Docs will be ASAP.

`spriteConfig`

Type: Object Default: undefined

See svg-mixer spriteConfig.

`spriteType`

Type: 'classic' | 'stack' Default: 'classic'

See svg-mixer spriteType.

For classic sprite you will need to setup additional loader for CSS. See example config.

`symbolClass`

Type: mixer.SpriteSymbol Default: mixer.SpriteSymbol

Custom symbol class. Docs will be ASAP.

`symbolId`

Type: string | Function Default: 'name'

How <symbol id> attribute should be named. All patterns from loader-utils#interpolateName are supported. Also can be a function which accepts 2 args - file path and query string and should return a function.