社名変更のお知らせ(2月~)

SvelteKitでMaterial Design Iconsを使う(svelte-material-icons)

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です