svg-sprite-generation-loader

Webpack loader for generating external svg symbol sprite files

Table of contents

• How it works?
• Installation
• Usage
• Options

How it works?

svg-sprite-generation-loader is a webpack-loader that takes a multiple svg files, optimize them (using svgo.optimize), transform (parse and return as an object with symbolId, attributes and content (disabled by default) keys) and put them back in one file.

Input multiple svg files, e.g:

1<!-- file1.svg -->
2<svg viewBox="0 0 10 10">
3  <!-- file1.svg content -->
4</svg>
5
6<!-- file2.svg -->
7<svg viewBox="0 0 10 30">
8  <!-- file2.svg content -->
9</svg>
10
11<!-- file3.svg -->
12<svg viewBox="0 0 15 40">
13  <!-- file3.svg content -->
14</svg>

Output one svg file (svg sprite):

1<svg xmlns="http://www.w3.org/2000/svg">
2  <symbol viewBox="0 0 10 10" id="file1">
3    <!-- file1.svg content -->
4  </symbol>
5
6  <symbol viewBox="0 0 10 30" id="file2">
7    <!-- file1.svg content -->
8  </symbol>
9
10  <symbol viewBox="0 0 15 40" id="file3">
11    <!-- file3.svg content -->
12  </symbol>
13</svg>

You can refer to this file to display all your icons using SVG stacking technique

Installation:

1npm install svg-sprite-generation-loader --save-dev

yarn

1yarn add svg-sprite-generation-loader --dev

Usage:

In your webpack config:

1const SvgSpriteGenerationPlugin = require('svg-sprite-generation-loader/plugin.js');
2
3module.exports = {
4  plugins: [new SvgSpriteGenerationPlugin()],
5  module: {
6    rules: [
7      {
8        test: /\.svg$/,
9        use: 'svg-sprite-generation-loader',
10      },
11    ],
12  },
13};

In some source code:

1import iconData from 'path/to/some/icon-file-name.svg';
2
3// by default iconData will include symbolId and attributes keys.
4// If you enable the addContent loader option, the `content` key will also be added
5
6<svg {...iconData.attributes}>
7  <use href={`path/to/sprite/filename.svg#${iconData.symbolId}`} />
8</svg>;

Options

{
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
    'removeXMLNS',
  ],
}