The optimization for some people is a very fun thing to do because you can make your app/website load faster and use a minimal amount of requests but for others is a word that has a meaning of a non-enjoyable task since you need to spend more time to the project that is actually working.

Recently, the designer I work with, recommended me to use the loader https://github.com/kisenka/svg-sprite-loader that allows to create SVG Sprites with Webpack at the time you create 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.

svg-sprite-loader examples