zum Hauptinhalt springen.
UX/UI Design, Entwicklung & TYPO3 in Karlsruhe Karlsruhe | seit 2006

Iconsets automatisiert pflegen und ins Projekt integrieren

01.05.2021, geschätzte Lesedauer: Minute(n). #entwicklung #svg #webdesign

In dynamischen Webprojekten werden Iconsets regelmäßig aktualisiert. Hier stelle ich eine simple Methode für die Pflege eines dynamischen SVG Iconsets und die Ausgabe der Icons vor.

SVG Sprites via Gulp generieren

Auf einer Webseite mit nur wenigen Icons können die SVG-Grafiken direkt inline ins HTML integriert werden - einzeln oder als SVG-Sprite. Nachteil: Beim Aufruf weitere Unterseiten werden auch die Icons erneut geladen. Bei den meisten Seiten ist es daher perfomanter und energieeffizienter, die Icons als externe Dateien - und damit vom Browser cachbar - einzubinden. Sind alle Icons in einer Sprite Datei zusammengefasst, muss nur noch eine Anfrage an den Server gestellt werden, die nachhaltigste Lösung gerade bei vielen Icons.

Bei jeder Veränderung im Icon Verzeichnis muss die Sprite-Datei jedoch neu generiert werden. Gerade bei wachsenden Projekten ist daher ein automatisierter Workflow sehr hilfreich.

Eine simple Lösung

Die Sprite Datei wird automatisch aus allen SVG Dateien innerhalb eines Verzeichnisses generieren. Sobald im Verzeichnis eine Datei hinzugefügt, geändert oder gelöscht wird, startet der Prozess erneut. Für mein Beispiel verwende ich das Buildtool Gulp, hier gehts zum Repository: https://github.com/onza/svg-sprite-generator

In der Demo sind ein paar weitere Tasks integriert:

  • Icons stylen durch Utility Klassen, z.B. Größe, Farbe, runter Hintergrund.
  • Material/Google Icons umbenennen ("_black_24dp" entfällt), um die Dateinamen und Sprite IDs kurz zu halten.
  • Generierte Sprite Datei inline in die HTML Datei integrieren (z.B. bei Onepage Websites denkbar).

Demo: https://onza.github.io/svg-sprite-generator/

Skyline Karlsruhe