Astroでアイコンを使うならastro-iconが便利！v1の使い方を紹介

Astroでアイコンを使いたいなと思って調べると真っ先に出てくるのがastro-icon。

astro-iconを使うと色んな種類のアイコンを簡単に使うことができます。
すでにある記事などを参考にして使おうと思ったのですが、astro-iconがv1以前のものが多くヒットしてv1の使い方と異なっていたので、v1の使い方をまとめてみました。

この記事執筆時点でのastro-iconのバージョンは1.1.0です。

astro-iconとは

astro-iconはAstroフレームワークでアイコンを簡単に扱うためのパッケージです。

このパッケージはカスタムSVGアイコンを埋め込む機能や@iconify-json/*パッケージでオープンソース表示する機能などのアイコン表示をサポートしています。

Astro Icon | Astro Icon

astro-iconのインストール

astroのコマンドでインストールすることができます。
npmやyarnでastro-iconをインストールすることもできますが、設定などを自動で追加できるのでastroのコマンドでインストールすることをおすすめします。

npx astro add astro-icon

公式サイトのGetting Startedのページはこちらです。

Getting Started | Astro Icon

astro-iconの使い方

インストールできたらアイコンを使いたいページでastro-iconを使うことができます。
astro-iconは自分で作成したsvgをアイコンとして表示することがもできますが、今回はMaterial Design IconsやOcticonsなどのオープンソールのアイコンを使う方法を紹介します。

まずはastro-iconを使うためのコンポーネントをインポートします。

---
import { Icon } from 'astro-icon/components'
---

<Icon name="mdi:account" />

Iconコンポーネントでは表示したいアイコンをnameで指定します。
例えばmdi:accountはMaterial Design Iconsのアカウントのアイコンです。

iconify-jsonで使用するオープンソースのアイコンデータをインストール

astro-iconでオープンソースのアイコンを使うためには使いたいアイコンのデータをインストールする必要があります。

例えばMaterial Design Iconsを使いたい場合は以下のコマンドでインストールできます。

npm install -D @iconify-json/mdi

astro-iconはIconifyに対応しているのでIconifyのページから使いたいアイコンを探すことができます。

Open Source Icon Sets - Iconify

アイコンデータの名称を調べる方法

使いたいアイコンが見つかったらそのアイコンのデータをインストールします。
@iconify-json/の後にアイコンのデータ名を指定します。

指定できるアイコンのデータ名は以下のIconifyのjsonファイルで定義されています。

icon-sets/collections.json at master · iconify/icon-sets

先に紹介したMaterial Design Iconsはmdi、Octiconsはocticonなどちゃんと使えるアイコンの名称を調べる必要があります。

octiconsなら以下のコマンドでインストールできます。

npm install -D @iconify-json/octicon

まとめ

astro-iconはとても便利ですがv1以前の記事が多くv1の使い方がわかりにくいと感じたのでまとめてみました。

最初はastro-iconだけでアイコンを使えるのかなと思っていましたが、アイコンデータをインストールする必要があるのでその点は注意が必要です。

1. iconifyで使いたいアイコンを探す
2. 使いたいアイコンのデータをcollections.json(紹介したリンク)の中から探す

この手順が踏むことで、astro-iconを使って簡単にアイコンを表示することができます。