Using an inline SVG icon system with Hugo

[UtkarshVerma]

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

How to use inline SVGs with Hugo | BitBanged

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.

[UtkarshVerma]

For those who are interested, I’ve modularised this approach now.

Hugo module for using an SVG icon system(incl. FontAwesome)

A while back, I shared my method of using an SVG icon system in Hugo. Using an inline SVG icon system with Hugo I was testing out Hugo modules and decided to modularise this method of injecting icons so that it would be easier to use is across different themes and websites. It doesn’t have any NPM dependencies. Though it only has Font Awesome 5 support by default, you can use any SVG icon set there is online, or with any custom SVG, with this module. Here’s the module: Hope this helps you i…

https://github.com/UtkarshVerma/hugo-mod-svg-icon-system