× Startseite
SVG-Icons mit CSS/SCSS in Hugo integrieren

Kostenlose Bootstrap SVG-Icons in Hugo benutzen

Bootstraps kostenlose SVG-Icons

Bootstrap stellt mehr als 1300 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 benutzt werden.

SVG-Icon per Font schnell 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 199 Kb. Der folgende Link muss dafür in den Head der Webseite integriert werden:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

Innerhalb des Content wird dann durch folgende HTML-Angaben 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. Es macht schon einen Unterschied ob 10 SVG-Icons übertragen werden oder mehr als 1300.

SVG-Icon 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.md Dateien gespeichert. HTML-Code sollte in Hugo, innerhalb einer markdown Datei, als Shortcode (HTML-Schnipsel) gespeichert werden. Je nachdem wo das SVG-Icon angezeigt werden soll, wird in Template-Dateien - list.html, single.html oder in Partials - der SVG-Code direkt eingefügt.

Hugo Shortcode für Bootstrap SVG-Icons

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 Code für den Shortcode svg.html sieht 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 namenlose Parameter des Shortcode wird mit .Get 0 der Variablen $svg zugewiesen. Die Variable wird mit einer if else if Abfrage der CSS-Klasse, zum entsprechend über die Zwischenablage kopierten und eingefügten SVG-Code geleitet und dann erfolgt die Ausgabe. Durch die if else if Abfrage kann der Shortcode jederzeit erweitert werden.

Das SCSS für den Shortcode svg.html

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

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

SCSS 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 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 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 Code per Zwischenablage kopieren</a></li>
    ...
  </ul>
</nav>

Und der 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-Icon’s

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

li
Dem List-Item wird eine Zeilehö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-Icons 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 Light-Theme sondern auch im Dark-Theme erkennbar ist. Dies 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-Icon 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.

Linkliste zu diesem Beitrag

Das könnte Sie auch interessieren

- Update 01. Aug. 2021 |
7 Minuten Lesezeit
0
Dieser Beitrag wurde mit der Hugo-Version 0.87.0 erstellt.

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

© 2021 - Frank Kunert  -  Ich über mich
Ein Service von webdienste-kunert.de