Creating SVG sprites with Webpack using svg-sprite-loader

Webpack Sep 24, 2018

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 in 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 to use your .svg file from the generated sprite in your template 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 updated 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 optimization is just one among many that you must apply to your projects and is highly recommended.

JetBrains/svg-sprite-loader
Webpack loader for creating SVG sprites. Contribute to JetBrains/svg-sprite-loader development by creating an account on GitHub.

Edgardo

Full-stack web and mobile developer

Buy me a coffee Support me with a Coffee please :)