Astroで、Tabler Iconsを使う

TRANsのウェブサイトは、Astroを使用しています。
Astroで、Tabler Iconsを使う方法を解説します。

Tabler Iconには、Astro用のコンポーネントライブラリが存在しません。そのため、@tabler/icons-preactを、preact経由で使います。

まず、@tabler/icons-preactをインストールします。

pnpm i @tabler/icons-preact

これで、preact用のTabler iconsがインストールされました。

次に、Astroのpreactプラグインをインストールします。これにより、preactが使えるようになります。
つまり、Astroから@tabler/icons-preactが使えるようになるということです！

pnpm astro add preact

これで、インストールが完了しました！

---
import { IconBrandGithub } from "@tabler/icons-preact"
---
<IconBrandGithub />

のように書くことで、Astroに埋め込みます。

動的ライブラリであるpreactを使っていますが、Astroが事前にレンダリングしてくれているので、JavaScriptは注入されません。Astroのメリットですね！