最近、Fontawesome等のアイコンフォントを使うのは当たり前になってきています。
有名どころのアイコンフォントは、ファイルサイズがとても大きく、一つ使うだけでも結構インパクトがあります。
それに加えてGoogleマテリアルアイコン等、他のアイコンフォントを使う場合、サイトの表示速度やデータ量などが問題になりやすく、導入するのに躊躇してしまいます。
必要なアイコンだけのサブセットを作成すればデータ量や読み込み速度の問題は回避できるはずです。
ところが、サブセットを作るのは手順が多く複雑です。なのでサブセット導入までに至らず、すべてのフォントを読み込んでいる人も多いかと思います。
この記事では、サブセットを作らずに必要なフォントだけを読み込む方法としてインラインSVGの手法をご紹介しようと思います。
この記事を読むことで、アイコンフォント導入時の様々な問題（フォント読み込み前のちらつき、読み込み時間、ファイルサイズ）が一気に片付きます。
①GoogleマテリアルアイコンのSVGファイルを取得する
SVGファイルダウンロード方法
Google マテリアルアイコンのサイトに行きます。
必要なアイコンを検索します。
ダウンロードボタンを押すとsvgファイルがダウンロードできます。
SVGファイルの中身
ダウンロードしたsvgファイルはテキストファイルなので、中身を見ることができます。
SVGスプライトで使うため、svgファイルを直接読み込むのではなく、ファイルの中身のテキストを加工して使用します。
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>②SVGスプライト化する
SVGスプライトとuse要素
<!-- アイコン定義 -->
<svg>
<symbol id="someIcon" ... />
</svg>
<!-- アイコン使用 -->
<svg>
<use xlink:href="someIcon" />
<svg>アイコン定義を作成する
- ①のsvgタグからviewBox以外を削除
- ①のsvgタグをsymbolタグに置き換える
- symbolタグにid（以下の例だとsvg-search）を追加する
- <defs>~</defs>にsymbolタグ部分を格納する
<svg aria-hidden="true" style="display: none;">
<defs>
<!---SVGアイコン定義---->
<symbol viewBox="0 0 24 24" id="svg-search">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</symbol>
<!---SVGアイコン定義---->
</defs>
</svg>上記のSVGスプライトの定義は、bodyタグ内のどこかに書かれていれば大丈夫です。
アイコンを配置する
- xlink:hrefにidを指定する
- svgタグにサイズ、色調整用のclassを追加する
<!-- アイコン使用 -->
<svg class="svg-icons"><use class="face" xlink:href="#svg-search"></use></svg>③CSSでSVGアイコンの色やサイズを調整する
- 幅と高さは個別に指定する
- fillで色を変更
その他は必要に応じて追加したり変更してください。
.svg-icons {
width: 3em;/*幅*/
height: 3em;/*高さ*/
fill: white;/*色*/
display: block;
margin: 0 auto;
margin-top: -1em;
margin-bottom: 0.5em;
}まとめ
サイト軽量化のため、アイコンフォントは必要なもの以外は読み込みたくない。
そんな思いから、今回の記事を書きました。
SVGアイコンは結構いろんなところで手に入ります。imgタグで直接svgファイルを指定してもいいのですが、インラインSVG化することで、色の変更や回転とかできるようになりますので、便利だと思います。
