Hugo Inline SVG

Simple Partial Usage

The "source" path is relative to the resources folder.

{{ partial "inline-svg" "icons/bootstrap/envelope" }}

Optional Arguments for Partial

To use the optional argument you must pass a dict as the partials context.

{{ partial "inline-svg" (dict "src" "icons/bootstrap/envelope" "fs" 2 "block" true "title" "Icon Title" "desc" "Icon Desc")}}

Source

src points to the SVG file relative to the assets folder. The .svg suffix is optional.

Display style

display can be set to the following:

inline to display:inline-block and match the height of text (scale of 0.7em).
block to display:block and have a scale of 1em. (default)

Size

By default the SVG's are set to font-size: inherit; which allows the svg to take on the font-size of its parent. Aternatively you can override this behaviour with EITHER following options:

fs can be set to 1-7. These sizes mirror bootstrap's font sizes with the addition of 7 which is 0.875 (.small or <small>)
rem can be set to 1-5 which will set the font-size to 1-5rem. More granular control is available with fs.

SVG Title

title adds a title tag which browsers pick up and display on hover. It also adds aria-labelledby to the SVG. (for assistive technology). The title is useful for desktop users, but does not add functionality for mobile users. (who aren't using assistive technology/screen readers)

SVG Description

description adds a description tag and adds aria-describedby to the SVG. (for assistive technology)

Shortcode usage

{{< inline-svg src="icons/bootstrap/envelope" block=true title="Icon Title" desc="Icon Desc" >}}

Styling your icons

You need to wrap your partial or shortcode in a div or span and add CSS classes to change the size and color.

An example utilizing bootstrap 5's utility classes is as follows:

<span class="fs-2 text-primary">{{ partial "inline-svg" "icons/bootstrap/envelope" }}</span>

fs-2 changes the font size for the svg and text-primary changes the line color to primary (blue by default).

Installation

Import module

# config.yaml
module:
  imports:
  - path: github.com/future-wd/hugo-inline-svg

Import CSS

You need to import required css from `/assets/scss/inline-svg.scss'

// /assets/scss/index.scss  ! if your file is not located here, you must adjust your import path !
@import "inline-svg.scss";