SVG Spritemap Webpack Plugin


This [webpack][webpack] plugin generates a single SVG spritemap containing multiple elements from all .svg
files in a directory. In addition, it can optimize the output and can also generate a stylesheet containing the sprites
to be used directly from CSS. Chris Coyier has a good write-up about the why's and how's of this technique on
[CSS Tricks][css-tricks-article]. Use it in combination with the [svg4everybody][svg4everybody] package to easily and
correctly load SVGs from the spritemap in all browsers.

Installation

``shell
npm install svg-spritemap-webpack-plugin --save-dev
`

Usage

Webpack configuration
This plugin can be added to webpack like any other, documentation on all configuration options is available.

`js
import SVGSpritemapPlugin from 'svg-spritemap-webpack-plugin';

export default {
// ...
plugins: [
new SVGSpritemapPlugin()
]
}
`

SVG element
When there's a file phone.svg in the source directory and the prefix option is set to sprite- (default),
the sprite can be included in a HTML-file like so:

`xml



`




SVG4Everybody

> [SVG for Everybody][svg4everybody] adds [SVG External Content][svg-external-content-support] support to [all browsers][can-i-use-svg].

It's a good idea to combine the svg-spritemap-webpack-plugin with [svg4everybody][svg4everybody]. This can be done
by passing an options object or true to the svg4everybody` options key or by initializing SVG4Everybody manually.

License

This project is licensed under the MIT license.

[webpack]: https://webpack.github.io/
[css-tricks-article]: https://css-tricks.com/svg-symbol-good-choice-icons/
[svg4everybody]: https://github.com/jonathantneal/svg4everybody
[svg-external-content-support]: http://css-tricks.com/svg-sprites-use-better-icon-fonts/##Browser+Support
[can-i-use-svg]: http://caniuse.com/svg