SvelteKitでMaterial Design Iconsを使う（svelte-material-icons）
SvelteKitプロジェクトでMaterial Design Iconsを簡単に利用できるライブラリ「svelte-material-icons」の導入と使い方を解説。インストールからアイコンの読み込み、スタイリング方法まで紹介します。
SvelteKitプロジェクトにアイコンを導入したかったので探したら良さげなライブラリがありました。
svelte-material-icons を利用して、SvelteKitプロジェクトにMaterial Design Icons（MDI）を導入することでアイコンを管理します。
インストール
まずはインストールします。
npm i svelte-material-icons使い方
アイコンは全てsvelteコンポーネントとして読み込みます。
アイコンを指定してimportします。
たとえば、“MenuIcon”を利用したいときは以下のように書きます。
<script>
import MenuIcon from 'svelte-material-icons/Menu.svelte';
</script>
<div>
<MenuIcon />
</div>アイコンの探し方
ちなみに、アイコンは以下の2サイトで検索して見つけるのがオススメです。
Material Symbols and Icons - Google Fonts
スタイルを加える
以下のようにコンポーネントに属性を加えることで、スタイルを調整できます。この例ではcolorとsizeを指定しています。
<div>
<MenuIcon color="red" size="2em" />
</div>全てのスタイルオプション
上記以外にもアイコンのスタイリングのためのオプションが用意されています。
<script>
import Check from "svelte-material-icons/Check.svelte";
</script>
<Check {color} {size} {width} {height} {viewBox} {title} {desc} {class} {ariaHidden} {ariaLabel} />