SVGアイコンをsymbolで定義してuseで呼び出しまくる

投稿日：

更新日：

背景

SVGをimgタグで読み込むとアニメーション実装ができず、インラインで必要な箇所にSVGのコードを入れて読み込むと記述量が多くソースが汚くなってしまいます。

それを回避するためにSVGをsymbolで定義し、useで使い回す方法が便利です。

実装方法

SVGのコードを取得する

今回は例としてGoogle FontsでハートアイコンのSVGをダウンロードしました。

取得したコードを整形すると以下のコードになっていました。

SVG
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
  <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/>
</svg>

symbolでSVGを定義する

色の指定はcurrentColorにするとCSSで指定したcolorプロパティの値を表すので、設定することをお勧めします。
symbolにfill="currentColor"をつけるとまとめて指定できますが、アイコンによってはfill属性以外に色が指定されていることもあるので必要に応じて調整します。

SVG
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="display: none;">
  <defs>
    <!-- ここにsymbolでSVGを定義する -->
    <symbol id="icon-favorite" viewbox="0 -960 960 960">
      <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" fill="currentColor" />
    </symbol>
  </defs>
</svg>
まとめてSVGを定義する時はdefsの中にsymbolを増やし、1つのsymbolに対して1つのSVGアイコンを定義してください。
idは重複しないように変更してください。

useで定義したSVGを呼び出す

width、heightを指定しなくても使えますが、useに対してsvgのサイズがおかしくなるので設定しておいた方がよいです。

アイコンを使用したい箇所に以下の記述を書けば何回でも繰り返し同じアイコンを呼び出すことができます。

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" role="img">
  <use href="#icon-favorite" />
</svg>
SVG 2でxlink:hrefが非推奨になり、hrefに置き換えられたようです。

CSSでサイズや色を調整する

色はcolorプロパティで指定できます。他にもSVGコードを直接埋め込んだ時と同様にfillプロパティに色を指定するといった方法も使うことができます。

アイコンのサイズはaspect-ratio: 1;で正方形になるようにしておいても良いでしょう。

実装例

おまけ

PHPが使える環境の場合、svg-symbol.phpのようなファイルに定義するSVGをまとめおきます。

定義は一度だけでよいのでinclude_once()を使用してbodyタグ直下に記述し、1度しか読み込みが実行されないようにします。

index.php
<?php include_once('parts/svg-symbol.php'); ?>

参考・引用

この記事をシェアする