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

Astroでアイコンを使うならastro-iconが便利!v1の使い方を紹介
この記事のポイント
  • Astroでアイコンを使うならastro-iconは手軽で便利
  • 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のコマンドでインストールすることをおすすめします。

Terminal window
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を使いたい場合は以下のコマンドでインストールできます。

Terminal window
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なら以下のコマンドでインストールできます。

Terminal window
npm install -D @iconify-json/octicon

まとめ

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

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

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

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

Let's work together

私たちと一緒にWEBを作りませんか?

コードコネクトでは共にWEBを作るメンバーを募集しています。
プロダクトマネージャー、メディアマネージャー、デザイナー、エンジニア、ライター様々な分野のメンバーの参加をお待ちしています!

ご興味あれば、ぜひ弊社のサイトからご連絡ください。

Related Posts

Collaborative Innovation
for Your Growth

合同会社コードコネクトはフロントエンドを中心としたWeb開発を得意としています。
このようなシステム開発にご興味のある方、またはお困りの方はお気軽にお問い合わせください。

  • JamstackをベースとしたWebサイトの構築
  • Reactなどを用いたアプリケーションの開発
  • 運用に耐えられるメンテナンス性を考慮したプロダクト開発
  • モダンで運用可能な開発環境の構築