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

MDI Search

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} />

SvelteKitでMaterial Design Iconsを使う（svelte-material-icons）

インストール

使い方

アイコンの探し方

スタイルを加える

全てのスタイルオプション

On this page