SVG-Dateien in Hugo-Projekten inline einbetten — Template-Helper & Shortcode

Hugo

SVG-Icons verwenden wir in jedem unserer Projekte, in den meisten Fällen wollen wir die SVGs direkt im HTML einbetten. Hierfür haben wir uns eine kleine Helfer-Funktion gebastelt, die wir mit euch teilen möchten.

Wir packen die SVG-Dateien für gewöhnlich ins Content- und nicht ins Static-Verzeichnis. Innerhalb des Content-Verzeichnisses erstellen wir ein Unterverzeichnis für alle Medien-Dateien, die redaktionell gepflegt werden.

.
├── content
|   ├── media
|   |   ├── svg
|   |   |   ├── eine-fancy-svg-datei.svg
├── static

Die SVG-Datei wird als Frontmatter-Variable inklusive Pfad innerhalb der Content-Datei gespeichert, das sieht so aus:

---
icon: "/media/svg/eine-fancy-svg-datei.svg"
---

Innerhalb der Templates und Snippets verwenden wir folgende Funktion, um SVG-Dateien inline einzubinden.

{{ with .Params.icon }}
  {{ if (fileExists .) }}
    {{ readFile . | safeHTML }}
  {{ end }}
{{ end }}

Sollen die SVG-Dateien nicht in einer Frontmatter-Variable gespeichert, sondern direkt im Markdown verwendet werden, bietet sich ein Shortcode an.

{{ with .Get "src" }}
  {{ if (fileExists .) }}
    {{ readFile . | safeHTML }}
  {{ end }}
{{ end }}

Der SVG-Shortcode kann dann direkt innerhalb der Content-Dateien verwendet werden.

{{< svg src="/media/svg/eine-fancy-svg-datei.svg" />}}
Lukas Becker, geschäftsführender Gesellschafter der Digitalagentur candyblue UG (haftungsbeschränkt) aus Kassel
Lukas

Lukas ist Gründer und Geschäfsführer von candyblue, ihr findet ihn bei Instagram oder xing.

Kaffeekasse

Der Artikel hat Dir weitergeholfen? Sehr schön! Dann spendier uns doch ein 🍺 oder einen ☕ auf Steady.com.

Supporte uns auf Steady.com
Lukas Becker, geschäftsführender Gesellschafter der Digitalagentur candyblue UG (haftungsbeschränkt) aus Kassel 1