💬

[2023年6月版]Astro.js 小ネタ集 その5 絵文字・アイコンを簡単に扱う

2023/06/22に公開

前回に引き続きAstro.jsでの小ネタを紹介していきます。

ここでは astro-iconify と Iconify サイトについてご紹介いたします。

絵文字・アイコンを簡単に扱う

Astroで絵文字やアイコンを簡単に扱うには astro-iconify が便利です。

インストールとコンポーネントの使い方

インストール方法&使い方は README.md にある通りですが、

shell
$ npm i astro-iconify

でインストール、利用するのは、

---
import { Icon } from 'astro-iconify'
---

<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
<Icon pack="mdi" name="account" />

<!-- Equivalent shorthand -->
<Icon name="mdi:account" />

でOKです。

アイコンの探し方

ここで Iconタグの packname属性はどこから探して来ればよいのかというと、

などのサイトが利用できます。

例えば、Iconifyのリファレンスページは以下のようなページです。

Iconifyのリファレンス トップ

それっぽいキーワードを英単語で検索してみます。例えば 'flower' とすると、

Iconifyのリファレンス flower

こんな感じで'flower'にタグ付けされたリストアップされます。
足りなければ'Find more'ボタンをクリックします。

Iconifyのリファレンス flower + Find More

このような感じでさらにアイコンが出てきます。
ここから '大変よくできましたアイコン'をクリックしてみます。

Iconifyのリファレンス Browser Icon

はい、ここで出てきた 'fluent-emoji-flat:white-flower' が絵文字の名前です。
これをIconタグの name 属性に指定すればOKです。

または ':' で分割して、前半の fluent-emoji-flatpack属性、後半のwhite-flowername属性に指定すればOKです。

このようにIconタグだけで非常に多くのアイコンが取り扱えて便利です!

今回はここまでといたします。

Discussion