svg-sprite-generation-loader v2.1.1

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:

<!-- file1.svg -->
<svg viewBox="0 0 10 10">
  <!-- file1.svg content -->
</svg>

<!-- file2.svg -->
<svg viewBox="0 0 10 30">
  <!-- file2.svg content -->
</svg>

<!-- file3.svg -->
<svg viewBox="0 0 15 40">
  <!-- file3.svg content -->
</svg>

Output one svg file (svg sprite):

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="0 0 10 10" id="file1">
    <!-- file1.svg content -->
  </symbol>

  <symbol viewBox="0 0 10 30" id="file2">
    <!-- file1.svg content -->
  </symbol>

  <symbol viewBox="0 0 15 40" id="file3">
    <!-- file3.svg content -->
  </symbol>
</svg>

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

Installation:

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

yarn

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

Usage:

In your webpack config:

const SvgSpriteGenerationPlugin = require('svg-sprite-generation-loader/plugin.js');

module.exports = {
  plugins: [new SvgSpriteGenerationPlugin()],
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: 'svg-sprite-generation-loader',
      },
    ],
  },
};

In some source code:

import iconData from 'path/to/some/icon-file-name.svg';

// by default iconData will include symbolId and attributes keys.
// If you enable the addContent loader option, the `content` key will also be added

<svg {...iconData.attributes}>
  <use href={`path/to/sprite/filename.svg#${iconData.symbolId}`} />
</svg>;

Options