HUGO

Using an inline SVG icon system with Hugo

I’ve written an article on using inline SVGs with Hugo:

In short, it utilizes a partial for embedding the SVG icons into the templates. The partial takes the SVG filename as an argument.

{{ $svg := . }}
{{ $class := print $svg "-icon" }}
{{ $match := "<svg (.*)?>(.*)</svg>" }}

{{ $replaceWith := printf `<svg class="%s" ${1}>${2}</svg>` $class }}
{{ return (replaceRE $match $replaceWith (printf "/assets/images/%s.svg" $svg | readFile) | safeHTML) }}

I’d love to receive suggestions and your opinions on the article.

7 Likes