Astroでアイコンを使うときに便利なのが「astro-icon」です。多彩なアイコンがSVGフォーマットで提供されており、カラーやサイズなどのプロパティを簡単に変更することが可能です。さらに、npm経由で簡単にインストールでき、インポートや使い方もシンプルです。本記事では基本的な使い方をまとめました。

astro-iconのインストール

npx astro add astro-icon

参照：https://www.astroicon.dev/getting-started/

使いたいアイコンパッケージを探す

Open Source Icon Sets - Iconify

パッケージをインストールする

npm i -D @iconify-json/package-name

参照：https://github.com/natemoo-re/astro-icon?tab=readme-ov-file#iconify-icons

Astro上でimportする

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

<Icon name="package-name:icon-name" />

幅を変える

<Icon name="mdi:account" size={32} />

参照：https://github.com/withastro/roadmap/discussions/107