[![npm][npm]][npm-url]
[![node][node]][node-url]
[![install size][size]][size-url]
[![semantic-release][semantic-release]][semantic-release-url]

webpack-svgstore

src="https://webpack.js.org/assets/icon-square-big.svg">

Combine svg files into one with 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:

``bash
npm i webpack-svgstore
`

Using yarn:

`bash
yarn add webpack-svgstore
`

Usage

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

`javascript
//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

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

svgxhr("svg-sprites.svg");
`

#### 3) HTML code for using your icons

HTML:

`html



`

JSX:

`html



`

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 element without 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

[npm]: https://img.shields.io/npm/v/webpack-svgstore.svg
[npm-url]: https://npmjs.com/package/webpack-svgstore
[node]: https://img.shields.io/node/v/webpack-svgstore.svg
[node-url]: https://nodejs.org
[size]: https://packagephobia.now.sh/badge?p=webpack-svgstore
[size-url]: https://packagephobia.now.sh/result?p=webpack-svgstore
[semantic-release]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-release-url]: https://github.com/semantic-release/semantic-release