TOP / TIPS / SVGアイコンを定義して任意の場所で呼び出す【symbol】

SVGアイコンを定義して任意の場所で呼び出す【symbol】

SVGで作ったアイコンや画像を１か所でまとめて定義しておいて、好きなところで簡単に使いたい！画像として切り出したら簡単に色が変えられないよ！どうしよう！というときのやり方。

SVGを定義する

bodyの上の方で使いたいSVGを定義しておきます。

PHPが使える場合はicons.phpなど専用のファイルを作ってインクルードさせると管理がしやすいです。

  1. コピーしてきた任意のsvgコード（複数でも可）をsymbolタグに書き換え、idを設定する
  2. 色をcurrentColorにする
  3. symbolタグすべてをdefsタグで囲む
  4. さらにsvgタグで囲み、display: noneする
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="display: none;">
	<defs>
		<symbol id="user" viewBox="0 0 20 20">
			<path d="M15.586,15.008A5,5,0,0,0,11.25,12.5H8.75a5,5,0,0,0-4.336,2.508,7.506,7.506,0,0,0,11.172,0ZM20,10A10,10,0,1,1,10,0,10,10,0,0,1,20,10Zm-10,.625A2.813,2.813,0,1,0,7.188,7.813,2.811,2.811,0,0,0,10,10.625Z" fill="currentColor" />
		</symbol>

		<symbol id="out" viewBox="0 0 9.488 8.302">
			<path d="M41.314,36.57a.594.594,0,0,0,0-.839l-2.372-2.372a.594.594,0,0,0-.839.839l1.36,1.36h-3.9a.593.593,0,1,0,0,1.186h3.9L38.1,38.1a.594.594,0,0,0,.839.839l2.372-2.372Zm-6.349-3.384a.593.593,0,1,0,0-1.186H33.779A1.779,1.779,0,0,0,32,33.779v4.744A1.779,1.779,0,0,0,33.779,40.3h1.186a.593.593,0,1,0,0-1.186H33.779a.592.592,0,0,1-.593-.593V33.779a.592.592,0,0,1,.593-.593Z" transform="translate(-32 -32)" fill="currentColor" />
		</symbol>
	</defs>
</svg>

SVGを呼び出す

呼び出しは以下でできます。（hrefは呼び出したいSVGのid）

<svg>
	<use href="#user"></use>
</svg>

ただこれだけだと、SVGのサイズが300px×150pxになってしまう（ブラウザのデフォルトのサイズのようです）ので、基本サイズを設定しておきます。

svg {
    width: 1em;
    height: 1em;
}

テキストと並べるときに同じ大きさになるように、わたしは1emにすることが多いです。

実際に使っているのはこんな感じ

定義

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="display: none;">
	<defs>
		<symbol id="user" viewBox="0 0 20 20">
			<path d="M15.586,15.008A5,5,0,0,0,11.25,12.5H8.75a5,5,0,0,0-4.336,2.508,7.506,7.506,0,0,0,11.172,0ZM20,10A10,10,0,1,1,10,0,10,10,0,0,1,20,10Zm-10,.625A2.813,2.813,0,1,0,7.188,7.813,2.811,2.811,0,0,0,10,10.625Z" fill="currentColor" />
		</symbol>

		<symbol id="out" viewBox="0 0 9.488 8.302">
			<path d="M41.314,36.57a.594.594,0,0,0,0-.839l-2.372-2.372a.594.594,0,0,0-.839.839l1.36,1.36h-3.9a.593.593,0,1,0,0,1.186h3.9L38.1,38.1a.594.594,0,0,0,.839.839l2.372-2.372Zm-6.349-3.384a.593.593,0,1,0,0-1.186H33.779A1.779,1.779,0,0,0,32,33.779v4.744A1.779,1.779,0,0,0,33.779,40.3h1.186a.593.593,0,1,0,0-1.186H33.779a.592.592,0,0,1-.593-.593V33.779a.592.592,0,0,1,.593-.593Z" transform="translate(-32 -32)" fill="currentColor" />
		</symbol>
	</defs>
</svg>

読み込み

<?php include_once('icons.php'); ?>

呼び出し

<span class="icon">
	<svg class="svgicon user">
		<use href="#user"></use>
	</svg>
</span>

スタイル

svg.svgicon {
    width: 1em;
    height: 1em;
}
TIPS
SVG

関連記事