In den letzten beiden Artikeln habe ich ja erzählt, wieso man anstelle von Icon-Fonts besser SVG verwenden sollte und welchen Vorteil hierbei die Verwendung von Symbols hat. Nun werden sich vielleicht einige von euch gefragt haben, wie man eine solche Datei am besten erstellen kann. Oft hat man ja SVG Icons eher als Einzeldateien rumliegen und bei großen Sammlungen wäre der manuelle Aufwand doch recht groß.

Genau dieses Problem hatte ich diese Woche auch bei einem Projekt. Ein Kollege wollte die Icon-Sammlung Entypo verwenden, die allerdings nur in Form einzelner SVG-Dateien vorlag. Ich konnte auch auf die Schnelle keine Variante mit nur einer einzelnen Datei finden. Ich hatte aber schon so eine Idee, die ich das umsetzen könnte 🙂

Automatisierung mit Gulp

Früher hätte ich für diese Aufgabe vermutlich PHP verwendet. Nicht sehr elegant, aber eben eine Sprache, die ich ganz gut beherrsche. Nun ist aber die Arbeit mit XML-Dateien in PHP nicht wirklich schön und außerdem wollte ich mal einen neuen Weg versuchen, der dazu noch möglichst wenig Aufwand bedeutet.

In diesem Zusammenhang bietet sich dann ein Task-Runner an. Ich hatte in der Vergangenheit schon einmal mit Grunt gearbeitet und wollte mir schon länger mal das sehr ähnliche Gulp ansehen. Nach ein paar gezielten Suchanfragen fand ich dann ein recht gutes Paket für die Aufgabe: gulp-svg-symbols. Damit ist es sehr einfach möglich, mehrere SVG-Dateien in einem Ordner zu kombinieren und als Symbols in einer neuen SVG-Datei zu speichern.

Der Gulp Task

Ein Gulp Task besteht in der Regel aus mehreren „Pipes“. Das sind Schritt, die nacheinander auf eine (oder mehrere) Dateien angewendet werden. Es wird immer die Rückgabe der vorherigen Pipe in die nächste weitergegeben. Der Task für die Kombination sieht bei mir wie folgt aus:

gulp.task( 'base-sprites', function () {
	return gulp.src( 'base-icons/*.svg' )
		.pipe( svgSymbols( {
			svgClassname: 'entypo-base-icons',
			id: 'entypo-icon-%f',
			templates: ['default-svg']
		} ) )
		.pipe( rename( function ( path ) {
			path.basename = 'entypo-base-icons';
		} ) )
		.pipe( svgmin( {
			plugins: [
				{cleanupIDs: false}
			]
		} ) )
		.pipe( gulp.dest( 'symbols' ) );
} );

Der Task hat also vier Pipes. Die erste definiert die Quelldateien. In der zweiten passiert die eigentliche Arbeit. Die kombiniert die Dateien und fügt dabei zu jedem Symbol ein ID-Attribut hinzu, das das Präfix „entypo-icon-“ gefolgt vom Dateinamen hat. Die dritte Pipe benennt die Zieldatei um und die vierte Pipe speichert das Ergebnis in einem Unterorder Symbols.

Zusätzlich zu dem Task müssen noch die Dependencies definiert werden. Dies geschieht in einer package.json Datei. In der gulpfile.js Datei werden diese Dependencies geladen und anschließend die Tasks ausgeführt. Ich habe alles in einem GitHub-Repository zusammengefasst. Wenn ihr es selbst mal testen möchtet, müsst ihr zuerst Node.js und npm installieren, anschließend das Repository klonen und zuletzt diese beiden Befehle ausführen:

$ npm install
$ gulp

Der Gulp-Task kümmert sich dann um den Rest und erstellt zwei SVG-Dateien, eine mit den Basis-Icons und eine mit den Social-Icons.

Fazit

Das Erstellen einer SVG-Datei mit Symbols ist also mit den richtigen Werkzeugen kein Problem. Falls ihr also eine große Sammlung an SVG-Dateien habt, die ihr kombinieren möchtet, dann probiert den Workflow doch einfach mal aus.

Und falls unter meinen Lesern ein Gulp/Grunt/Node Experte ist, dann würde ich mich sehr freuen, wenn ihr mir einen Tipp geben könntet, die ich den Code DRY bekomme 🙂