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