SVGスプライトとは・使い方
再利用できるアイコン
SVGスプライトは、<symbol> を使って複数のアイコンを1つのSVGにまとめ、<use> でページ内で再利用します。リクエストを減らし、アイコンを一箇所で管理できます。
1. シンボルを定義
<svg style="display:none"> <symbol id="ic-check" viewBox="0 0 24 24"> <path d="M5 13l4 4L19 7" fill="none" stroke="currentColor" stroke-width="2"/> </symbol> </svg>
2. useで使う
<svg class="icon"><use href="#ic-check"></use></svg>
必要な場所で use を繰り返します。1つのシンボルを何度も。
3. CSSでスタイル
stroke="currentColor" や fill="currentColor" を使うと、アイコンはCSSの color を継ぎます：
.icon { width: 24px; height: 24px; color: #6c8cff; }
利点
- HTTPリクエストが減る（全アイコンが1ファイル/ブロック）。
- アイコン更新が一箇所で済む。
- 他のSVG同様、スタイル・拡縮が可能。
アイコンを作る
svgdeskで各アイコンを設計し、コードをコピーして id と viewBox 付きの <symbol> で包みます。