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

| Name | Type | Default value | Description | | -------------- | -------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | symbolId | string | function | "[name]" | Sprite item (single icon) <symbol> id attribute value.string or function that takes the file path of the original icon as an argument and returns string.You can use interpolateName patterns. Default value ("[name]") is equal to icon filename (without extension). For example, by default symbolId for file1.svg file will be file1 | | spriteFilePath | string | sprite.svg | Path to sprite file. webpack.output.path is included | | svgoOptimize | boolean | object | true | Enable/Disable/Customize source svg file optimization with svgo.optimize. The following options are used by default: {  plugins: [    {      name: 'preset-default',      params: {        overrides: {          removeViewBox: false,        },      },    },    'removeXMLNS',  ],} You can disable it completely (by passing false) or use your own configuration (see svgo docs) | | addContent | boolean | false | Add svg content as property to transformed svg object (may increase bundle size when enabled) |