In einem meiner Adventskalender 2016 Beiträgen habe ich darüber geschrieben, wie man ein SVG-Sprite mit SVG-Symbolen mit Hilfe eines Gulp-Scripts erstellen kann. Nachdem Gutenberg ein essentieller Bestandteil von WordPress geworden ist, habe ich das Paket wordpress/scripts zuletzt sehr häufig verwendet. Nun musste ich vor Kurzem wieder in einem Projekt einen solchen SVG-Sprite erstellen, aber mit gefiel es nicht, hierfür noch zusätzlich Gulp verwenden zu müssen, und so habe ich mich auf die Suche nach einer Alternativen gemacht, die stattdessen wordpress/scripts verwendet.

SVG Spritemap Webpack Plugin

Nach einer kurzen Suche bin ich auf svg-spritemap-webpack-plugin gestoßen, was wirklich sehr vielversprechend aussah. Es verwendet webpack (was in wordpress/scripts enthalten ist) und es wird wie folgt verwendet:

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

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

Dieses Beispiel erstellt ein SVG-Symbols-Sprite, welches alle SVG-Dateien aus dem src Ordner und allen Unterordnern enthält. Dies ist ein Beispiel für ein beliebiges webpack-Projekt. Aber wie genau können wir das nun mit wordpress/scripts verwenden?

Erweiterung der Standard webpack-Konfiguration

Da ich noch sehr neu mit Umgang mit webpack bin (zumindest dem „aktiven) habe ich ein wenig suchen müssen. Ich habe schließlich eine einfache Möglichkeit gefunden die Standard-Konfiguration von webpack zu ersetzen/erweitern:

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

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

Zuerst einmal importieren wir uns die defaultConfig von wordpress/scripts. Anschließend können wir verschiedene Teile davon erweitern. Hierzu verwenden wir jeweils den zugehörigen „Abschnitt“ (z.B. defaultConfig.module.rules). Nach dieser Vorbereitung können wir nun unser Skript hinzufügen.

Das vollständige Skript zum erstellen von SVG-Symbols-Sprites

Im etwas aus SVG-Dateien zu generieren, müssen wir zuerst eine „module rule“ für die .svg Erweiterung hinzufügen, erst dann können wir unter „plugins“ den Code aus dem ersten Beispiel hinzufügen. Der vollständige Code zum erstellen eines Sprites könnte wir folgt aussehen:

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
					},
				},
			}
		),
	],
};

Dies würde alle SVG-Dateien aus src/icons/base-icons/ verwenden (in diesem Beispiel ohne Unterordner) und daraus ein SVG-Sprite build/symbols/entypo-base-icons.svg erstellen, wobei einige weitere Optionen verwenden werden, ähnlich zu meinem alten Beitrag. Der einzige Unterschied, den ich finden könnte, was das Fehlen einer CSS-Klasse auf dem <svg> Tag selbst. Um das Sprite letztlich zu erstellen müsst ihr npm run build (oder einen der anderen Tasks zum Kompilieren der Quelldateien) ausführen, so wie ihr es auch normalerweise mit wordpress/scripts oder einem ähnlichen npm-Task machen würdet.

Fazit

Die Verwendung eines Skripts zum automatisierten Erstellen von SVG-Symbols-Sprites aus einzelnen Dateien kann euch viele Stunden manueller Arbeit ersparen. Falls ihr in eurem Projekt ohnehin schon wordpress/scripts verwendet, dann versucht doch einfach mal dieses Skript aus. Es ist in der Regel besser, sich nur auf einen „Task Runner / Kompiler“ zu konzentrieren, statt mehrere zu verwenden. Ich werde alle meine alten Gulp/Grunt/etc. Skripte entweder mit wordpress/scripts oder aber mit nativen npm oder webpack Skripten ersetzen.

Falls ihr den Code aus diesem Blogbeitrag direkt ausprobieren wollt, dann findet ihr ein lauffähiges Beispiel auf GitHub. Nach dem Download müsst ihr einfach npm install gefolgt von npm run build ausführen, um das Ergebnis zu sehen. In diesem Beispiel zeige ich zusätzlich, wie ihr zwei Sprites mir Bildern aus zwei unterschiedlichen Ordnern erstellen könnt.