css-svg-sprite-webpack-plugin

Generate CSS sprite from directory with SVG files.

npm i css-svg-sprite-webpack-plugin

webpack.config.js

const CssSvgSpriteWebpackPlugin = require('css-svg-sprite-webpack-plugin');

exports.default {
    entry: //...,
    output: //...,
    plugins: [
        new CssSvgSpriteWebpackPlugin({
            fileName: 'sprite.css',
            dir: 'svg-directory',
            injected: true //add <link> to index.html
        })
    ];
}

Usage example 🙂

filename - is name of SVG file. You can use this class names:

<div class="icon-filename"></div>
<div class="icon-filename__after"><!--Add background-image to ::after--></div>
<div class="icon-filename__before"><!--Add background-image to ::before--></div>

and CSS variable:

div {
    background: var(--icon-filename) no-repeat center / contain;
}