SvelteKitプロジェクトにアイコンを導入したかったので探したら良さげなライブラリがありました。
svelte-material-icons を利用して、SvelteKitプロジェクトにMaterial Design Icons（MDI）を導入することでアイコンを管理します。
インストール
まずはインストールします。
npm i svelte-material-icons使い方
アイコンは全てsvelteコンポーネントとして読み込みます。任意の文字列（ここではMenuIcon）でimportします。
<script>
import MenuIcon from 'svelte-material-icons/Menu.svelte';
</script>
<div>
<MenuIcon />
</div>スタイルを加える
以下のようにコンポーネントに属性を加えることで、スタイルを調整できます。この例では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} />この記事の著者
阿部 隼也
Abe Shunya
株式会社プッシュ 代表取締役社長・創業者。東京都出身。横浜市立大学在学中に当社を創業し、SEOなどデジタルマーケティング事業や、ChatGPT入門講座を代表とするプライムアカデミー事業を立ち上げた。技術も好きで、自らコードを書きながらサービスを開発する。
Twitter(X)アカウント
