in Webpack — Sep 24, 2018

Creating SVG sprites with Webpack using svg-sprite-loader

I found this Webpack loader https://github.com/kisenka/svg-sprite-loader that allows you to create SVG Sprites at the time you generate your build or in development mode, so I decided to implement it in my current project.

The steps are very easy to follow.

Adding the svg-sprite-loader to your Webpack config

// Libraries
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

// Configuration
module.exports = () => {
    return {
        module: {
            rules: [
                {
                    test: /\.svg$/,
                    use: [
                        'svg-sprite-loader',
                        'svgo-loader'
                    ]
                },
            ]
        },

        plugins: [
            new SpriteLoaderPlugin(),
        ]
    }
};

Importing the .svg files into your app.js or the desire javascript file

You can import your .svg files one by one

import 'sprite-images/my-logo.svg';
import 'sprite-images/my-icon.svg';

Or import all of them with this

function requireAll(r) {
  r.keys().forEach(r);
}

requireAll(require.context('sprite-images/', true, /\.svg$/));

Both works perfectly!

Using it in your html/pug templates

I mentioned PugJS because this actually works in plain HTML or with a template engine, and the way of using your .svg file from the generated sprite is this one:

<svg>
  <use xlink:href="#my-logo"></use>
</svg>

And those are the only three steps you need to follow in order to start using SVG Sprites in your project.

But what if you have large .svg files or simply you don’t want to generate a SVG Sprite with all the .svg files in your project? Then you need to update your webpack.config.js to load those .svg files using url-loader and the others with the svg-sprite-loader like the following.

Use svg-sprite-loader along with url-loader

// Libraries
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

// Configuration
module.exports = () => {
    return {
        module: {
            rules: [
                {
                    test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
                    loader: 'url-loader',
                    include: path.resolve(__dirname, 'src/assets/images'), // new line
                    options: {
                        limit: 512,
                        name: 'assets/images/[name].[ext]'
                    }
                },
                {
                    test: /\.svg$/,
                    include: path.resolve(__dirname, 'src/assets/sprite-images'), // new line
                    use: [
                        'svg-sprite-loader',
                        'svgo-loader'
                    ]
                },
            ]
        },

        plugins: [
            new SpriteLoaderPlugin(),
        ]
    }
};

The only difference between the original config file and this one is the include option that contains the source url where you want to get the sprite-images and the ones that you don’t want to have in the SVG Sprite.

And that’s all!

This type of optimisation is just one among many that you must apply to your projects and is highly recommended.