Iconsets automatisiert pflegen und ins Projekt integrieren
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).
