HugoでSVGのアイコンを埋め込みたい。
解決策
いくつか方法がある。<img>タグからも読み込みたい場合は方法1、埋め込みのみの場合は方法2を採用する。
ただし、Markdown内で埋め込む場合は、ショートコードでラップする必要がある。
方法1. readFile を使う
static/image/xxx.svgのようにstaticフォルダにSVGファイルを置き、readFileで読み込む。
<span class="icon">{{ readFile "static/img/close_icon.svg" | safeHTML }}</span>
方法2. partial を使う
layouts/partials/icons/xxx.svgのようにpartialフォルダにSVGファイルを置き、partialで読み込む。
<span class="icon">{{ partial "icons/xxx.svg" . }}</span>
注意: 埋め込む場合は、svgファイル内にXML宣言(<?xml version="1.0" encoding="UTF-8"?>)があれば、それがそのまま文字として出力されるので、事前に削除しておく必要がある。