Astroを使ったWeb開発において、視覚的に洗練されたアイコンは欠かせません。 ここでは、Astroプロジェクトでアイコンを簡単に扱えるツール「astro-icon」を紹介し、Iconifyとの連携方法についても解説します。 Astroプロジェクトをスタイリッシュに演出するアイコンの導入がスムーズにできるようになります。

astro-iconの導入

astro-iconはAstroプロジェクトに簡単にアイコンを追加できるツールです。以下の手順で導入を進めましょう。

プロジェクトのセットアップ

既存のAstroプロジェクトがある場合はこのステップをスキップしてください。新規プロジェクトの場合は以下のコマンドを実行してセットアップします。

npm create astro@latest

画面の指示に従ってプロジェクトを設定してください。

astro-iconのインストール

astro-iconをプロジェクトにインストールするには、プロジェクトのルートディレクトリで以下のコマンドを実行します。

npm install astro-icon

Astro設定ファイルの更新

astro.config.mjsファイルを開き、astro-iconを統合します。

import { defineConfig } from 'astro/config';
import icon from 'astro-icon';

export default defineConfig({
  integrations: [icon()]
});

アイコンの使用

アイコンを使用するためにAstroコンポーネント内でIconコンポーネントをインポートします。

---
import { Icon } from 'astro-icon';
---

<Icon name="mdi:account" />

mdi:accountは、Material Design Iconsセットからaccountアイコンを指定しています。サイズや色もHTML属性でカスタマイズできます。

<Icon name="mdi:account" width="32" height="32" color="blue" />

Iconifyを活用したアイコン選択

astro-iconの利点の一つは、Iconifyと連携していることです。Iconifyは100以上のアイコンセットを提供しており、Iconify公式ウェブサイトで多種多様なアイコンを検索できます。

Iconify - home of open source icons

Iconify - home of open source icons

Open source vector icons from all popular icon sets

icon-sets.iconify.design

検索バーでアイコンを探し、特定のアイコンセットやカテゴリーで絞り込みも可能です。 iconify検索

  1. 言語を選択します。
  2. 表示されるコードをコピーします。 iconifyコピー

見つけたアイコンは次のように貼り付け、使用できます。

<Icon name="mdi:user" />

このように、Font AwesomeやBootstrap Iconsなど多くのアイコンセットをAstroプロジェクトに簡単に追加できます。

特殊なアイコンセットの使用

一部の特殊なアイコンセット（例：logos）は、astro-iconとは別途パッケージをインストールする必要があります。 iconify　logos

例えば、logosセットを使う場合、以下のコマンドでインストールします。

npm install @iconify-json/logos

その後、インストールしたアイコンセットを使用するには、次のようにコードを記述します。

<Icon name="logos:javascript" />

この方法を使えば、一般的なアイコンセットに加えて、プロジェクト固有のニーズに対応した特殊なアイコンセットも利用できます。

カスタムアイコンの使用

カスタムSVGアイコンをプロジェクトに追加することも可能です。カスタムアイコンを使用するには、src/icons/ディレクトリにSVGファイルを配置します。 例えば、以下のコードを使うことでカスタムアイコンを表示できます。

<Icon name="my-custom-icon" />

このコードは、src/icons/my-custom-icon.svgファイルを参照します。カスタムアイコンを使用すれば、プロジェクトにオリジナルのデザインを簡単に取り入れることができます。

エラーの対応

下記のようにエラーが出た場合はこちらをご参照ください。

Error when evaluating SSR module [...]/astro.config.mjs: failed to import "astro-icon"
SyntaxError: The requested module 'cheerio' does not provide an export named 'default'
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
【Astro】astro-iconとcheerioの互換性問題 - トラブルシューティング

【Astro】astro-iconとcheerioの互換性問題 - トラブルシューティング

Astroプロジェクトでよく使用されるAstro-IconとCheerioの互換性問題に関する詳細なトラブルシューティングガイドです。エラーの原因と解決方法をわかりやすく説明しています。

nexunity.tech

パフォーマンス最適化のヒント

大規模なプロジェクトや大量のアイコンを使用する場合、パフォーマンスを最適化するために使用するアイコンセットを絞り込むことが重要です。astro.config.mjsファイルで、使用するアイコンセットを特定のアイコンに制限することができます。 以下の設定では、Material Design Iconsの全アイコンを含めつつ、Font Awesome 6 Solidとlogosセットから特定のアイコンのみを使用するように設定しています。

import { defineConfig } from 'astro/config';
import icon from 'astro-icon';

export default defineConfig({
  integrations: [icon({
    include: {
      mdi: ['*'],
      fa6Solid: ['user', 'home'],
      logos: ['javascript', 'typescript'],
    },
  })],
});

これにより、プロジェクトで使用しないアイコンセットがビルドに含まれなくなり、ビルド時間が短縮されるだけでなく、サイトのパフォーマンスも向上します。

まとめ

astro-iconとIconifyを活用することで、Astroプロジェクトに簡単にアイコンを追加できます。一般的なアイコンセットの他に、特殊なアイコンセットやカスタムアイコンも利用可能です。アイコンの使用は、デザイン面でのアクセントとして役立つだけでなく、UIをより直感的でユーザーフレンドリーにします。

次に試すべきこととして、さまざまなアイコンを使用してプロジェクトのレイアウトを強化し、アイコンのアニメーションやインタラクションを追加することを検討してみてください。

詳しい手順や詳細なドキュメントは以下のリンクを参考にしてください。

Astroプロジェクトでの開発を楽しんでください。