npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

svg-spritemap-webpack-plugin

0.3.0 • Public • Published

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
        })
    ]
}

Since svg4everybody requires you to execute the svg4everybody() function in your JavaScript this package comes with a helper. Adding the helper to your webpack entry will automagically execute this function for you. Read more in the SVG4Everybody section.

// webpack.config.js
modules.exports = {
    entry: [
        // Your own CSS and JS
        'node_modules/svg-spritemap-webpack-plugin/svg4everybody-helper.js'
    ]
}

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
svgo {} Options for SVG Optimizer. Note that cleanupIDs is always false
glob {} Options for glob
prefix '' Prefix added to <symbol> id in the spritemap
filename 'spritemap.svg' Name for the generated file (located at the webpack output.path)

SVG4Everybody

You probably want to combine the svg-spritemap-webpack-plugin with svg4everybody.

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

The helper included in this package has the following default options. If you want anything else you'll have to execute the svg4everybody() function yourself. More information about the options is available in the SVG for Everybody README.

{
    polyfill: true // Force inline SVG
}

TODO

  • PNG fallback
  • Tests

License

This project is licensed under the MIT license.

Install

npm i svg-spritemap-webpack-plugin

DownloadsWeekly Downloads

9,651

Version

0.3.0

License

MIT

Last publish

Collaborators

  • avatar