simple-svg-sprite

A Webpack plugin for creating an SVG sprite from individual SVG files.

Table of Contents

• Installation
• Usage
• Options
• Change reference
• Demo

---

Installation

Install simple-svg-sprite using npm or yarn as a dev dependency:

npm install --save-dev simple-svg-sprite

OR

yarn add --dev simple-svg-sprite

Usage

Here's how to use the plugin in your Webpack configuration:

// import package 
const { SimpleSVGSprite, GenerateSVGContentHash } = require('simple-svg-sprite');
const svgContentHash = GenerateSVGContentHash('path/to/svgs/folder')

module.exports = {
   // ... other webpack config 
   plugins: [ 
   new SimpleSVGSprite({
      svgFolderPath: 'path/to/svgs/folder',
      spriteOutput: spritemap.${svgContentHash}.svg,
    }),
  ] 
};

Options

Option	Required	Description	Default
svgFolderPath	Yes	The path to SVG images folder	-
spriteOutput	NO	The output sprite name	"spritemap.svg"
prefix	NO	Prefix to each symbol ID	"shape-"
svgoOptions	NO	Custom optimization using SVGO library	{}

Change reference

we need to convert reference from your code to sprite refrence example:

// your code 
<svg>
  <use xlink:href="#shape-sp-delete" />
</svg>
// to
<svg>
  <use xlink:href="spritemap.${svgContentHash}.svg#shape-sp-delete" />
</svg>

• You don't need to update your code base to this format , you can use Mutation observer to do that OR use custom loader:

// add this rule to your loaders
{
        test: /\.(js|html)$/,
        exclude: [/node_modules/],
        use: {
          loader: path.resolve(__dirname, './custom-loaders/EditSvgHrefLoader'),
          options: {
            svgFileName: `spritemap.${svgContentHash}.svg`,
            prefix: 'shape-',
          },
        },
},

// create EditSvgHrefLoader.js file in custom-loaders folder
custom-loaders/EditSvgHrefLoader.js

const loaderUtils = require('loader-utils');
module.exports = function (source) {
  const { svgFileName, prefix } = loaderUtils.getOptions(this);

  const modifiedSource = source.replace(
    new RegExp(`#${prefix}`, 'g'),
    `${svgFileName}#${prefix}`
  );

  return modifiedSource;
};

Demo

You can see demo here.