アイコンをSVGファイルで運用していくことにした

2025-10-04 Icons, SVG, Material Symbols, Web Performance, Astro

はじめに

このブログでは以前からMaterial Symbolsのアイコンフォントを使用していました。フォント設定を最適化した際に、必要なアイコンだけを選択的に読み込むよう改善していましたが、さらなるパフォーマンス向上を目指してSVGファイルでの運用に切り替えることにしました。

SVGファイル運用のきっかけ

FontsourceのMaterial Symbolsパッケージを検討している際に、気になるIssueを発見しました。

（Font Request: Material Symbols より引用）

Using SVGs to individually pick out the necessary icons will always lead to smaller bundles, especially if it’s only a couple of icons.

このサイトでも利用しているアイコンが数種類と少なく、さらにページ読み込み時にアイコンが遅れて表示されることが気になっていたため、SVGファイルでの運用に切り替えることにしました。

変更内容

変更前の実装はマテリアルシンボルガイドの通り、以下のようになっていました。

<span class="material-symbols-outlined text-base!" aria-hidden="true">
  calendar_today
</span>

Astroではv5.7からSVGファイルを通常のコンポーネントとしてレンダリングできるようになったため、インポートしたSVGファイルをそのまま使用しています。

Images | Docs

アイコンサイズ指定と、tailwindcss-typographyの影響を避け、余計なマージンが設定されないようinline指定をclassとして追加しています。

<CalendarTodayIcon
  width="16"
  height="16"
  class="not-prose inline"
  aria-hidden
/>

まとめ

ページ読み込み時のアイコン表示遅延は解決できました。（バンドルサイズやCore Web Vitalsの比較測定は実施しませんでした。）

少数のアイコンを利用する場合はこの方法で十分だと思います。大規模なWebアプリケーションで多くのアイコンが必要な場合は、別ツールの利用を検討するか、Material Symbolsを直接利用しつつページ読み込み時用のフォールバック表示（サイズ固定、文字非表示など）が必要かもしれません。

個人的には、必要なファイルが決まっている場合、運用負荷が許容範囲であればSVGファイル運用で統一するのが良いと考えています。

（余談）iconify

調査中にIconifyというOSSを発見しました。さまざまなフレームワークをサポートしており便利そうです。 APIを利用してアイコンを読み込む仕組みが特徴的だと感じていましたが、

（iconify/iconify のREADMEより引用）

You can also use API if you don’t know what icons user will need, while offering thousands of icons to choose from. This is perfect for applications that can be customised by user.

という記述を見て、ユーザーが表示アイコンを選択できるようなユースケースでは、確かにオンデマンド読み込みが適していると感じました。