Introduction
Ionicons is a great icon set created by the Ionic team. Whereas a lot of sets have pulled back from including logos, Ionicons has a large set builtin, it’s MIT licensed, and looks great on web, Android and iOS. Because it supports both SVG and web font there are a lot of ways to use Ionicons in your project. This site uses Hugo so my goal is make Ionicons available both as a partial and shortcode without Javascript.
Get the Icons
To get the Ionicons SVG files, I’ll be using Hugo Modules. Modules are nice because they let you specify a single file or directory within a git repository. In our case, we just want the svg directory. So I add the following to my config.toml file.
[module]
[[module.imports]]
path = "github.com/ionic-team/ionicons"
disable = false
[[module.imports.mounts]]
source = "src/svg"
target = "assets/svg/ionicon"Create Partial
I’ve created a file called ionicon.html in my theme’s layout/partials directory with the following content:
{{ $icon := .icon | default "logo-ionic" }}
{{ $width := .width | default "24"}}
{{ $height := .height | default "24" }}
{{ $color := .color | default "currentColor" }}
{{ $iconres := resources.Get (printf "/svg/ionicons/%s.svg" $icon) }}
{{ $svg := ($iconres.Content) }}
{{ $svg := (replaceRE `^.*?>(.*?)<\/svg>$` "$1" $svg) }}
{{ (printf `<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width="%s"
height="%s"
fill="%s"
>%s</svg>` $width $height $color $svg) | safeHTML }}Which I can then call in other layout files…
{{ partial "ionicon" (dict "icon" "logo-ionic" )}}{{ partial "ionicon" (dict "icon" "logo-ionic" "width" "32" height "32" color "#450000" )}}Create Shortcode
But I also want to be able to call it from content files such as this post. So I’ve also create a files called ionicon.html in my theme’s layout/shortcodes directory with the following content.
{{ $icon := "logo-ionic"}}
{{ $width := "24"}}
{{ $height := "24" }}
{{ $color := "currentColor" }}
{{ if .IsNamedParams }}
{{ if .Get "icon" }}
{{ $icon = (.Get "icon") }}
{{ end }}
{{ if .Get "width" }}
{{ $width = (.Get "width") }}
{{ end }}
{{ if .Get "height" }}
{{ $height = (.Get "height") }}
{{ end }}
{{ if .Get "color" }}
{{ $color = (.Get "color") }}
{{ end }}
{{ else }}
{{ if .Get 0 }}
{{ $icon = (.Get 0) }}
{{ end }}
{{ if .Get 1 }}
{{ $width = (.Get 1) }}
{{ end }}
{{ if .Get 2 }}
{{ $height = (.Get 2) }}
{{ end }}
{{ if .Get 3 }}
{{ $color = (.Get 3) }}
{{ end }}
{{ end }}
{{ $iconRes := resources.Get (printf "/svg/ionicons/%s.svg" $icon) }}
{{ $svg := ($iconRes.Content) }}
{{ $svg := (replaceRE `^.*?>(.*?)<\/svg>$` "$1" $svg) }}
{{ (printf `<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
width="%s"
height="%s"
fill="%s"
>%s</svg>` $width $height $color $svg) | safeHTML }}Which I can then call in content files…
{{< ionicon "logo-ionic" >}}{{< ionicon icon="logo-ionic" >}}{{< ionicon "logo-ionic" "32" "32" "#ff0000" >}}{{< ionicon icon="logo-ionic" width="32" height="32" color="#00ff00" >}}