Wails+Svelte+Flowbiteの環境でMDI Frontのアイコンを使う

今朝は５時から開発開始です。
かみさんが昨日から梅干しを私の部屋のベランダで干していて夜は部屋の中に移動しているので部屋中が梅のかおりでいっぱいです。何となくお腹が空いてきました。
今朝は、TWSNMP FCのマップ表示をWailsで作ったデスクトップアプリに移植するための準備です。
最近、デスクトップアプリはWails+Svelte+Flowbiteで作るのが気にっています。

The Wails Project | Wails

Flowbite Svelte - UI Component Library

素直に、Flowbiteのアイコン

タイトル未設定

を使えば、それほど苦労はないのですが、TWSNMP FCのマップ表示は
Material Design IconsのWeb font版を使う必要があります。

Material Design Icons - Icon Library - Pictogrammers

のアイコンで

のようなアイコンを表示しています。
マップに組み込むほうは、

npm i @mdi/font@5.9.55

でインストールしてmain.tsに

import "@mdi/font/css/materialdesignicons.css"

 と書けばOKでした。古いバージョンを指定してインストールしているのは、Amazonのアイコンが新しいバージョンだと削除されているからです。
svelteの画面で使う時は、

<span class="mdi mdi-access-point-check text-3xl"></span>

アイコンぽい書き方ではないので、

を使うことにしました。

<script lang="ts">
  import { Alert } from 'flowbite-svelte';
	import Icon from 'mdi-svelte';
  import { mdiAccount } from '@mdi/js';
 </script>

<div class="p-8">
	<Alert>
		<span class="mdi mdi-access-point-check text-3xl"></span>
		<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
	</Alert>
</div>

<Icon path={mdiAccount} color="black" />

のように書くと

アイコンが表示できました。

明日に続く