webpack-svg-sprite

Webpack SVG Sprite Plugin

Build an SVG sprite with Webpack and svg-sprite using configuration rather than imported dependencies in your app bundles. This is helpful if your app is not entirely powered by your bundled files - for example, a multi-page application made up of server-side and client-side components.

Usage

webpack.config.babel.js

import path from 'path';
import webpack from 'webpack';
import WebpackSVGSpritePlugin from 'webpack-svg-sprite';
import icons from './svg-sprite.js';
...
module.exports = {
    ...
    plugins: [
        new WebpackSVGSpritePlugin({icons}),
        ...
    ]
    ...
};

svg-sprite.js

export default [
    'user',
    'lock',
    'menu',
    ...
];

It's up to you to include the sprite in your app now, but once you've got it, you can now do this:

    <svg>
        <use href="#user"></use>
    </svg>

Options