Font Awesome 5 の SVG を使う
Font Awesome は通常、CSS ファイルから専用のフォントファイルを読み込み、CSS クラスを利用してアイコンを利用する。
このサイトでも RSS フィードのアイコンや GitHub のアイコンなどを利用したくなったのだが、Font Awesome のアセットをまるごと読み込むと重たいので、インラインに、SVG で埋め込めないか調べてみた。
Font Awesome 公式の GitHub リポジトリを見ると、svgs/ ディレクトリ配下に全てのアイコンの SVG ファイルがあるので、ココからお好みのアイコンのファイルをダウンロードする。
SVG を HTML ファイル内にインラインに埋め込むなら、ファイルの中身をコピペするだけ。その際は CSS で fill プロパティを使うとアイコンの色を変更できる。もしくは svg 要素などを直接編集して fill 属性を書き加えてやれば、指定の色に変更できる。
SVG ファイルを img 要素で読み込んだ場合は、CSS での色変更は不可能。予め SVG ファイル内で書き換えておくか、deSVG などのライブラリを使って SVG をインライン展開するスクリプトを組み合わせてやる必要がある。
SVG ファイルを CSS の background-image で読み込んだ場合も色変更不可能。opacity との併用で若干薄く見せたりは可能。
SVG ファイルを CSS の mask-image で読み込む方法もある。コレを使うと background-color で色が変更できるようになる。Chrome では現状 -webkit-mask-image というベンダプレフィックスが必要になり、対応状況がイマイチなので、あんまり使いたくない。
このサイトの場合は background-image で読み込んで opacity で調整するに留めた。気になるようなら fill 属性を SVG に直接指定することにする。
