In one of my advent calendar blog posts in 2016 I wrote (in German) about how to create a SVG sprite with SVG symbols using a Gulp script. With Gutenberg becoming a major part of WordPress I have used the wordpress/scripts package a lot lately. I a recent project I wanted to create such a SVG symbols sprite again, but I didn’t liked to use Gulp additionally with wordpress/scripts, so I searched for an alternative.

SVG Spritemap Webpack Plugin

After some search I’ve found the svg-spritemap-webpack-plugin which looked quite promising. It’s using webpack (which is also included in wordpress/scripts) and can be used like this:

const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');

module.exports = {
    plugins: [
        new SVGSpritemapPlugin('src/**/*.svg')
    ]
};

This example code would generate a SVG symbols sprite with all SVG files within the src folder and any subfolder. This is an example for any webpack project. But how would we add it to a project using wordpress/scripts?

Extending the default webpack configuration

As I’m very new to using webpack (at least “actively”) I had to do some research. I finally found a way to overwrite/extend the default configuration:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
	...defaultConfig,
	module: {
		rules: [
			...defaultConfig.module.rules,
		],
	},
	plugins: [
		...defaultConfig.plugins,
	],
};

First we import the defaultConfig from wordpress/scripts. After this, we are able to extend various parts of it. Any time we want to do this, we add the corresponding “section” of if (e.g. defaultConfig.module.rules). Whit this preparation we can finally add our script.

The complete script to generate SVG symbols sprites

In order to generate something from SVG files, we have to add a “modul rule” for the .svg extension and then also the “plugin” from the first code snippet. The complete code for one sprite might look like this:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const SVGSpritemapPlugin = require( 'svg-spritemap-webpack-plugin' );

module.exports = {
	...defaultConfig,
	module: {
		rules: [
			...defaultConfig.module.rules,
			{
				test: /\.svg$/,
				use: [ '@svgr/webpack', 'url-loader' ],
			},
		],
	},
	plugins: [
		...defaultConfig.plugins,
		new SVGSpritemapPlugin(
			'src/icons/base-icons/*.svg',
			{
				output: {
					filename: 'symbols/entypo-base-icons.svg',
				},
				sprite: {
					prefix: 'entypo-icon-',
					generate: {
						title: false
					},
				},
			}
		),
	],
};

This would grep all SVG files in src/icons/base-icons/ (in this example without subfolders) and generate a SVG sprite build/symbols/entypo-base-icons.svg with some additional options, similar to my old blog post. The only difference I could find was a missing CSS class for the <svg> tag itself. To generate the sprite, you have to run npm run build (or any other tasks compiling the sources), just as you would usually do with wordpress/scripts or similar npm tasks.

Conslusion

Using a script to build SVG symbols sprites from single files automatically can save hours of manual work. If you happen to use wordress/scripts in your project already, give this script a try. It’s usually better to rely on one “task runner / compiler” only, then using multiple ones. I will try to replace all of my old gulp/grunt/etc. scripts either with wordpress/scripts, native npm or webpack scripts.

If you want to try the code from this blog post, you can find a running example on GitHub. Just download, run npm install followed by npm run build and you should see the results. In this example I also show you how to compile two sprites from to different folders.