Webpack-svgstore NPM

webpack-svgstore

Combine svg files into one with <symbol> elements. Read more about this in CSS Tricks article. This plugin was built for Webpack 5. It takes some ideas from webpack-svgstore-plugin and gulp-svgstore.

Install

Using npm:

npm i webpack-svgstore

Using yarn:

yarn add webpack-svgstore

Usage

1) Require the plugin in your webpack.config.js file

//webpack.config.js
const SvgStore = require("webpack-svgstore");

module.exports = {
  plugins: [
    // create svgStore instance object
    new SvgStore({
      path: path.resolve(__dirname, "assets/svg/**/*.svg"),
      fileName: "svg-sprites.svg",
      prefix: "icon-",
    }),
  ],
};

2) Add the sprites loader in your code

import svgxhr from "webpack-svgstore/dist/helpers/svgxhr";

svgxhr("svg-sprites.svg");

3) HTML code for using your icons

HTML:

<svg>
  <use xlink:href="#icon-name"></use>
</svg>

JSX:

<svg>
  <use xlinkHref="#icon-name" />
</svg>

Plugin Options

Name	Type	Default	Description
`path`	`{String}`	`/*/.svg`	This option determines the path to the svg files that are going to be included in the sprites file.
`fileName`	`{String}`	`svg-sprites.svg`	This option determines the name of the resulting sprites file.
`inlineSvg`	`{Boolean}`	`false`	This option determines if the output should only contain the `<svg>` element without `<?xml ?>` and `DOCTYPE` to use inline.
`removeViewBox`	`{Boolean}`	`false`	Allows removing the viewBox attribute from each element.
`prefix`	`{String}`	`icon-`	This option determines the prefix of each symbol's id .