SVG Spritemap Webpack Plugin

This webpack plugin generates a single SVG spritemap containing multiple <symbol> elements from all .svg files in a directory. Chris Coyier has a good write-up about the why's and how's of this technique on CSS Tricks. Use it in combination with the svg4everybody package to easily and correctly load SVGs from the spritemap in all browsers.

NPM: svg-spritemap-webpack-plugin

Installation

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

Usage

// webpack.config.js
var SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new SVGSpritemapPlugin({
            // Optional options object
        })
    ]
}

Options

You can pass an object containing several options to SVGSpritemapPlugin(), this object can contain the following keys.

Option	Default	Description
src	'**/*.svg'	glob used for finding the SVGs that should be in the spritemap
glob	{}	Options object for glob
svgo	{}	Options object for SVG Optimizer, pass false to disable - note that the cleanupIDs plugin is always disabled
svg4everybody	false	Options object for SVG4Everybody
gutter	2	Amount of pixels added between each sprite to prevent overlap
prefix	'sprite-'	Prefix added to sprite identifier in the spritemap
filename	'spritemap.svg'	Name for the generated file (located at the webpack output.path), [hash] and [contenthash] are supported
chunk	'spritemap'	Name of the generated chunk

SVG4Everybody

SVG for Everybody adds SVG External Content support to all browsers.

You'll probably want to combine the svg-spritemap-webpack-plugin with svg4everybody. This can be done by passing an options object to the svg4everybody configuration key or by executing SVG4Everybody yourself.

TODO

• PNG fallback
• Tests

License

This project is licensed under the MIT license.