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サイトで検索して見つけるのがオススメです。

MDI Search

Lightning fast search engine to help developers find material design icons.

mdisearch.com

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

fonts.google.com

スタイルを加える

以下のようにコンポーネントに属性を加えることで、スタイルを調整できます。この例では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} />