× Home
Integrate SVG icons with CSS/SCSS in Hugo

Use free Bootstrap SVG Icons in Hugo

Free Bootstrap SVG-Icons

Bootstrap provides more than 1300 SVG icons. In this post, I describe how easily these can be used in Hugo. The Bootstrap SVG icons can also be used independently of the Bootstrap Toolkit.

Quickly integrate SVG icon via font

Bootstrap also provides a font with all SVG icons. With this method, all SVG icons are loaded from the jsdelivr.net website in two font formats - woff and woff2. Both font formats together have a file size of 199 Kb. The following link must be integrated into the head of the website:

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

Within the content, the font is then used through the following HTML specifications:

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

Since I want to use the user’s bandwidth sparingly, I only include the SVG icons that are really used as code. It makes a difference whether 10 SVG icons are transferred or more than 1300.

Copy SVG icon code via clipboard

The SVG icons can be copied to the clipboard on the Bootstrap website at - https://icons.getbootstrap.com/ . Pick an SVG icon and click on it.

Bootstrap page copy SVG icon code.
Via "Copy HTML" copy the SVG code to the clipboard.

Via Copy HTML copy the SVG code to the clipboard and paste it into the HTML at the desired position.

The content of web pages is saved in Hugo as markdown.md files. HTML code should be saved in Hugo, within a markdown file, as shortcode (HTML snippets). Depending on where the SVG icon is to be displayed, the SVG code is inserted directly in template files - list.html, single.html or in partials.

Hugo shortcode for Bootstrap SVG icons

And now comes an SVG icon - - with text behind it. The shortcode is called in markdown files as follows:

And now comes an SVG icon - {{< svg "bi-cart4" >}} - with text behind it..

The name of the shortcode is svg and the SVG icon has the CSS class bi-cart4. The code for the shortcode svg.html looks like this:

{{ $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 explanation

The SVG icon is output in a <span> HTML tag. This allows it to be inserted in the text without wrapping. The first nameless parameter of the shortcode is assigned to the variable $svg with .Get 0. The variable is directed with a if else if query of the CSS class, to the SVG code copied and pasted accordingly via the clipboard, and then the output occurs. The if else if query can be used to extend the shortcode at any time.

The SCSS for the shortcode svg.html

Without some SCSS, the SVG icon does not look good. In the inserted SVG code, the following CSS classes are present - class="bi-cart4". The SCSS for this looks like this:

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

SCSS explanation for the shortcode svg.html

The CSS-Klasse .bi
bi stands for bootstrap icon. Bootstrap assigns this CSS class to every SVG icon. For this reason, general instructions that apply to all SVG icons can be assigned to the class. display: inline-block; is actually superfluous for the shortcode that is output inside a <span>. However, I also use the CSS code for partials in which there is not necessarily a <span> around the SVG code.

The CSS-Klasse .bi-cart4
The size of the SVG icon is defined via width and height. vertical-align is important to position the SVG icon within the line. Each SVG icon is different and must be adjusted according to the line. This is a bit of fiddling, but not particularly time-consuming.

Embed Background SVG with Data URL via SCSS

Sometimes you have no choice but to include the SVG icon as a background-image through SCSS. The table of contents at the top of this page is generated automatically by Hugo. This means that you have no chance to intervene directly in the code. With SCSS it works nevertheless, even if it is a bit bumpy.

The HTML code generated by Hugo for the table of contents looks like this:

<nav id="TableOfContents">
  <ul>
    <li><a href="#svg-icon-via-font">Quickly integrate SVG icon via font</a></li>
    <li><a href="#copy-svg-icon-code">Copy SVG icon code via clipboard</a></li>
    ...
  </ul>
</nav>

And the SCSS code looks like this:

#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 Explanation for the background SVG icons

ul
The <ul> is requested with list-style-type: none; not to output symbols before the list entry.

li
The list item is assigned a line height of 1.7rem. This makes the list easier to read and on devices with a small viewport (smartphone, ..) there is enough space so that a touch does not land on two list items.

li:before
This statement creates an SVG icon before the list item. The height is adjusted to the line height. With margin-left the output of the SVG icon is moved to the left in front of the list item and with margin-right a distance to the list item is created.

It gets interesting with the background-image. The parameter url(‘data:image/svg+xml;utf8, … ‘); is filled with the SVG code already known from the clipboard. The colour of the SVG icon must be adjusted on my page so that the SVG icon is not only recognisable in the light theme but also in the dark theme. This is not possible with the background-image by using the SCSS statement color or fill. If you scroll further to the right in the SCSS code at the background-image, the fill="%236495ed" statement comes at some point. %23 corresponds to # then comes the hex colour code of the colour.

Background SVG icon hover

In the codepen.io post - Background SVG hovers with Data URL variables - it is shown how the SVG code in two SCSS variables, with different colours in the fill, is used to enable hovering in background SVG’s. I have dispensed with hovering the SVG icon in my table of contents.

Conclusion

Bootstrap SVG icons are free, look good, are easy to use and do not require the Bootstrap Toolkit to use. I decided to use the SVG code variant to save bandwidth for internet users and not be subject to dependencies on others’ servers. The effort for this is low. In addition, the jurisdiction within the EU, through the GDPR, sets a narrow framework with regard to automatic integration of services outside the EU. I expressly welcome these restrictions. Data protection starts with things that are inconspicuous at first glance.

List of links to this post

This might also interest you

- Update 01. Aug. 2021 |
8 minutes to read
0
This post was created with Hugo version 0.87.0.

With the German language setting, comments are not displayed in the English version of the website and vice versa.

© 2021 - Frank Kunert  -  About me
A service from webdienste-kunert.de