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 .

License

NPM package available here: webpack-svgstore

MIT © David Bergmann