×
Startseite RSS-Feed Info
SVG-Icons mit HTML und CSS/SCSS in Hugo integrieren

Kostenlose Bootstrap SVG-Icons in Hugo benutzen

Kostenlose Bootstrap SVG-Icons in Hugo benutzen

Bootstrap stellt mehr als 1800 SVG-Icons zur Verfügung. Wie einfach diese in Hugo benutzt werden können, beschreibe ich in diesem Beitrag. Die Bootstrap SVG-Icons können auch unabhängig vom Bootstrap Toolkit eingesetzt werden. Die Icons werden unter der MIT Lizenz veröffentlicht. Auch die kommerzielle Nutzung ist erlaubt.

Es gibt verschiedene Methoden die SVG-Icons in Hugo zu benutzen:

  • SVG-Icon per Font einbinden
  • SVG-Icon HTML-Code per Zwischenablage kopieren
  • Hugo Shortcode für Bootstrap SVG-Icons
  • Background SVG mit Data URL per SCSS einbinden

Je nach Einsatzort - im Markup, in Templates, in einem Partial oder Shortcode - ist man gezwungen eine andere Methode anzuwenden.

SVG-Icon per Font einbinden

Bootstrap stellt auch einen Font mit allen SVG-Icons zur Verfügung. Bei dieser Methode werden alle SVG-Icons in zwei Font-Formaten - woff und woff2 - von der jsdelivr.net Website geladen. Beide Font-Formate haben zusammen eine Dateigröße von 279 Kb in der zurzeit aktuellen Version 1.10.3. Die dazu passende CSS Datei hat eine Dateigröße von 93 Kb.

Die CSS Datei und die Font Dateien können von - https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/ - geladen werden. Wie Sie Font Dateien lokal speichern und in Ihre Website einbinden habe ich in meinem Blogbeitrag - Fonts lokal in Hugo benutzen - beschrieben. Der Blogbeitrag beschreibt das lokale Speichern von Google Fonts. Aber das Prinzip bleibt gleich.

Innerhalb des Content wird dann durch folgende HTML-Angabe der Font benutzt:

<p>Bootstrap SVG-Font - one character: <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i></p>  

Da ich sparsam mit der Bandbreite der Benutzer umgehen möchte, binde ich nur die wirklich benutzten SVG-Icons als Code ein. Deshalb setze ich den Font nicht ein, aber die anderen drei Methoden. Es macht schon einen Unterschied ob 10 SVG-Icons übertragen werden oder mehr als 1800.

SVG-Icon HTML-Code per Zwischenablage kopieren

Die SVG-Icons können auf der Website von Bootstrap unter - https://icons.getbootstrap.com/ - in die Zwischenablage kopiert werden. Suchen Sie ein SVG-Icon aus und klicken Sie auf das Icon.

Bootstrap page copy SVG-Icon code.
Über "Copy HTML" den SVG Code in die Zwischenablage kopieren.

Über Copy HTML den SVG Code in die Zwischenablage kopieren und im HTML an der gewünschten Stelle einfügen.

Der Inhalt von Webseiten wird in Hugo als Markdown Datei gespeichert. HTML-Code kann in den Markdown Dateien eingesetzt werden, aber das wird sehr schnell unübersichtlich. Je nachdem wo das SVG-Icon angezeigt werden soll, in den Template-Dateien list.html, single.html, etc. - in Partials oder Shortcodes kann man den SVG-Code dort direkt eingefügen.

Hugo Shortcode für Bootstrap SVG-Icons

Durch einen Shortcode wird der Inhalt einer Markdown Datei übersichtlicher. Der normale Text wird nicht mit Hugo Befehlen und HTML im Markdown vermischt. Und nun kommt ein SVG-Icon - - mit Text dahinter. Der Shortcode wird in Markdown Dateien wie folgt aufgerufen:

Und nun kommt ein SVG-Icon - {{< svg "bi-cart4" >}} - mit Text dahinter.

Der Name des Shortcode ist svg und das SVG-Icon hat die CSS-Klasse bi-cart4. Der Sourcecode für den Shortcode themes/tekki/layouts/shortcodes/svg.html sieht bei mir wie folgt aus:

{{ $svg := .Get 0 }}
<span>
	{{ if eq $svg "bi-cart4" }}
	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16">
		<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
	</svg>
	{{ else if eq $svg "bi-box-arrow-up-right" }}
	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
		<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
		<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
	{{ end }}
</span>

Shortcode-Erklärung

Das SVG-Icon wird in einem <span> HTML-Tag ausgegeben. Dadurch kann es auch im Text ohne Umbruch eingefügt werden. Der erste Parameter des Shortcode wird mit .Get 0 der Variablen $svg zugewiesen. Diese Variable wird über eine if else if Struktur verteilt. In den einzelnen Abschnitten wird der über die Zwischenablage kopierte und eingefügte HTML-Code gespeichert. Durch die if else if Abfrage kann der Shortcode jederzeit erweitert werden. Wie weiter oben beschrieben setze ich nicht mehr als 10 SVG-Icons insgesamt auf der ganzen Website ein.

Das CSS für den Shortcode svg.html

Ohne etwas CSS sieht das SVG-Icon nicht gut aus. Im eingefügten SVG-Code sind folgende CSS-Klassen vorhanden - class="bi bi-cart4". Das CSS dafür sieht so aus:

// bootstrap SVG-Icons
.bi {
  display: inline-block;
}
.bi-cart4 {
  width: 2rem;
  height: 2rem;
  vertical-align: baseline;
  color: red;
}

CSS Erklärung für den Shortcode svg.html

Die CSS-Klasse .bi
bi steht für bootstrap icon. Diese CSS-Klasse weist Bootstrap jedem SVG-Icon zu. Aus diesem Grund können der Klasse allgemeine, für alle SVG-Icons zutreffende Anweisungen zugewiesen werden. display: inline-block; ist für den Shortcode, der innerhalb eines <span> ausgegeben wird, eigentlich überflüssig. Ich benutze den gleichen CSS-Code aber auch für Partials in denen nicht unbedingt ein <span> um den SVG-Code steht.

Die CSS-Klasse .bi-cart4
Über width und height wird die Größe des SVG-Icon definiert. vertical-align ist wichtig um das SVG-Icon innerhalb der Zeile zu positionieren. Jedes SVG-Icon ist anders und muss entsprechend der Zeile angepasst werden. Das ist etwas Fummelarbeit, aber da es nur einmal gemacht werden muss nicht besonders aufwändig.

Background SVG mit Data URL per SCSS einbinden

Manchmal bleibt einem nichts anderes übrig als das SVG-Icon als background-image durch SCSS einzubinden. Das Inhaltsverzeichnis oben auf dieser Seite wird von Hugo automatisch generiert. Dadurch hat man keine Chance - direkt in den Code - einzugreifen. Mit SCSS geht es dennoch, wenn auch etwas holperig.

Der von Hugo generierte HTML-Code für das Inhaltsverzeichnis sieht wie folgt aus:

<nav id="TableOfContents">
  <ul>
    <li><a href="#svg-icon-per-font">SVG-Icon per Font schnell einbinden</a></li>
    <li><a href="#svg-icon-code-kopieren">SVG-Icon HTML-Code per Zwischenablage kopieren</a></li>
    ...
  </ul>
</nav>

Und mein SCSS-Code sieht so aus:

#TableOfContents {
	ul {
		list-style-type: none;

		li {
			line-height: 1.7rem;
		}
		li:before {
			content: "";
			height: 1.7rem;
			width: 0.9rem;
			display: block;
			float: left;
			margin-left: -1.4rem;
			margin-right: 0.7rem;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 100%;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%236495ed" class="bi bi-easel" viewBox="0 0 16 16"><path d="M8 0a.5.5 0 0 1 .473.337L9.046 2H14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1.85l1.323 3.837a.5.5 0 1 1-.946.326L11.092 11H8.5v3a.5.5 0 0 1-1 0v-3H4.908l-1.435 4.163a.5.5 0 1 1-.946-.326L3.85 11H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4.954L7.527.337A.5.5 0 0 1 8 0zM2 3v7h12V3H2z"/></svg>');
		}
  }
}

SCSS Erklärung für die Background SVG-Icons

ul
Die <ul> wird mit list-style-type: none; aufgefordert keine Symbole vor dem Listeintrag auszugeben.

li
Dem List-Item wird eine Zeilenhöhe von 1.7rem zugewiesen. Dadurch ist die Liste besser zu lesen und auf Geräten mit kleinem Viewport (Smartphone, ..) ist genügend Platz, damit ein Touch nicht auf zwei List-Items landet.

li:before
Diese Anweisung erstellt vor dem List-Item ein SVG-Icon. Die height wird der Zeilenhöhe angepasst. Mit margin-left wird die Ausgabe des SVG-Icon nach links vor das List-Item verschoben und mit margin-right ein Abstand zum List-Item erzeugt.

Interessant wird es beim background-image. Der Parameter url(‘data:image/svg+xml;utf8, … ‘); wird mit dem schon aus der Zwischenablage bekannten SVG-Code gefüllt. Die Farbe des SVG-Icon muss bei mir auf der Seite so angepasst werden, dass das SVG-Icon nicht nur im Lightmode sondern auch im Darkmode erkennbar ist. Das Umschalten erfolgt ganz oben auf der Webseite durch Klick auf das zweite Icon von rechts. Das Umschalten ist beim background-image nicht durch die SCSS-Anweisung color oder fill möglich. Wenn Sie im SCSS-Code beim background-image weiter nach rechts scrollen, kommt irgendwann die fill="%236495ed"-Anweisung. %23 entspricht # danach kommt der Hex-Farbcode der Farbe.

Background SVG-Icon Hover

In dem codepen.io Beitrag - Background SVG Hovers with Data URL variables - wird gezeigt wie der SVG-Code in zwei SCSS-Variablen, mit unterschiedlichen Farben im fill, dazu benutzt wird das Hovern bei Background SVG’s zu ermöglichen. Ich habe bei meinem Inhaltsverzeichnis auf das Hovern des SVG-Icon verzichtet.

Fazit

Bootstrap SVG-Icons sind kostenlos, sehen gut aus, die Benutzung ist einfach und es wird nicht das Bootstrap Toolkit für die Verwendung vorausgesetzt. Ich habe mich für die SVG-Code Variante entschieden, um Bandbreite bei den Internetbenutzern zu sparen und keinen Abhängigkeiten von Servern anderer unterworfen zu sein. Der Aufwand dafür ist gering. Außerdem setzt die Rechtsprechung innerhalb der EU, durch die DSGVO, einen engen Rahmen in Bezug auf automatisches Einbinden von Diensten außerhalb der EU. Diese Einschränkungen begrüße ich ausdrücklich. Datenschutz fängt schon bei auf den ersten Blick unscheinbaren Dingen an.

Update am 28.01.2023

Habe den Inhalt dieses Blogbeitrags überarbeitet und an die zurzeit aktuelle Version der Bootstrap SVG-Icons angepasst.

Linkliste zu diesem Beitrag

Das könnte Sie auch interessieren

Update:  |
8 Minuten Lesezeit
0
Dieser Beitrag wurde mit der Hugo-Version 0.115.2 erstellt.

Kommentare werden bei deutscher Spracheinstellung nicht in der englischen Variante der Webseite angezeigt und umgekehrt.

© 2023 - Frank Kunert  -  Ich über mich