Hugoを使った小説同人サイトの運営 FontAwesomeの卒業

tech 1237字：読了まで約2分17秒

Hugo アイキャッチ画像

サイトの改装を進めるうちに、FontAwesomeを卒業したくなってきた。理由は外部スクリプトの読み込みが気になるのと、フリーのアイコンが少ないため。近年は色々なSVGアイコンが配布されているため、代替案としてはそれを使おうと思った。本記事では、SVGアイコンとCSSだけでFontAwesomeを置き換えた方法についてまとめる。

pico.cssの採用

ところで、Hugo連載記事当時とはサイトデザインが大幅に変わっている。ミニマル・シンプルデザインにしたいと思ったので、CSSフレームワークのpico.cssを採用したのだ。この中にはフォームデザインのためにSVGがCSS変数として埋め込まれ、background-imageとして利用されている。これを参考に、SVGをフォントアイコンの代替として用いようと思った。

当サイトでFontAwesomeを利用していたのは以下の要素である。

少ないため、手間もそんなにはかからないかな。代替SVGアイコンはAll SVG Iconsで探すことにする。フリーのSVGアイコンコレクションサイトって感じだ。ライセンスは個々のプロジェクトページに書いてあるので、要確認。

CSS変数としての埋め込み

ALL SVG Iconsスクリーンショット

この Data URI ボタンを押してData URI（base64 形式）をコピーする。そしてあなたのCSSファイルに以下のように書く。（“data:"以下がコピーした値だ）

1:root {
2  --icon-tag: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZSB4bWxucz0iIj50YWc8L3RpdGxlPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIwLjU5IDEzLjQxbC03LjE3IDcuMTdhMiAyIDAgMCAxLTIuODMgMEwyIDEyVjJoMTBsOC41OSA4LjU5YTIgMiAwIDAgMSAwIDIuODJNNyA3aC4wMSIvPjwvc3ZnPg==");
3}

これでCSS変数 –icon-tagが定義された。あとはこれの使い方である。 アイコンはタグであるので、タグクラウドのひとつひとつの語の前に割り当てて表示すればよかろう。

mask-image

pico.cssでは、こうして埋め込んだSVGアイコンを、background-imageで使用している。しかし、これだと色がSVGに固定されてしまう。mask-imageを使うことで、FontAwesome的なWebフォントアイコンの使い心地に近づく。

mask-image - CSS | MDN は完璧には理解できていないが、SVG を画像として表示するのではなく、その形状を使って要素を切り抜く仕組みでいいらしい。

HTML、CSSはこんな風になっている。

1<a href="http://localhost:1313/tags/magic/" class="tags tag-magic">魔法</a>

 1a.tags {
 2    text-decoration : none ;
 3    padding : 1px 3px ;
 4    border-radius : 4px;
 5}
 6
 7a.tags::before {
 8    content: "";
 9    display: inline-block;
10    vertical-align: middle;
11    width: 1em;
12    height: 1em;
13    margin-right : 3px;
14    background-color: currentColor;
15    mask-image: var(--icon-tag);
16    mask-repeat: no-repeat;
17    mask-position: center;
18    mask-size: contain;
19/* Safari必須 */
20    -webkit-mask-image: var(--icon-tag);
21    -webkit-mask-repeat: no-repeat;
22    -webkit-mask-position: center;
23    -webkit-mask-size: contain;
24}

アイコンは装飾用途のため、疑似要素を使って表示している。

結論

残りのアイコンも同じ手順で実装し、FontAwesomeを卒業できた。モダンな実装ができ、Chat GPTに感謝している。

結論：mask-image を使うと、SVG アイコンを「色を持たない形」として扱える
→ CSS 側の色・テーマで自在に変更できる

関連記事