astro-iconとは

astro-iconは、iconifyが提供するオープンソースのSVGアイコンや、独自に作成したSVGアイコンをAstroプロジェクトに手軽に取り込めるライブラリです。

astro-iconを使うメリット

astro-iconは、SVGアイコンに特化したライブラリですが、SVGアイコンに慣れ親しんでいない人もいるかもしれません。

従来、Webサイトでアイコンを表示する手段としては、アイコンフォントが一般的であり、その中でもFont Awesomeが特に有名でした。

しかし、アイコンフォントにはアクセシビリティ上の問題や、以下のような欠点があります。

• ブラウザがテキストに対して行うアンチエイリアス処理によってアイコンのアウトラインがぼやけてしまう可能性がある。
• アイコン一式を定義したフォントファイルをリクエストすることでロード時パフォーマンスが低下する。
• フォントの読み込み完了後にレイアウトシフト（再描画）が発生する。

一方、SVGによるアイコンは、常に鮮明に表示され、svg要素としてインライン展開すれば、ファイルの読み込みによるパフォーマンスの低下の心配もありません。

Font Awesomeのアイコンをそのまま使用する場合は、astro-iconでも利用できます。astro-iconを介して使用することで、Font Awesomeのアイコンもインラインsvg要素として展開され、上述の問題を解決することができます。

astro-iconの導入方法

まず以下のコマンドでastro-iconをインストールします。

npm i astro-icon

astro-iconでiconifyのアイコンを使う

astro-iconでは、iconifyというサービスを介してオープンソースのアイコンを提供してくれています。

iconifyはトップページを見るとさまざまなアイコンセットがあり、
astro-iconを使うことで、簡単にiconifyのアイコンを使用できます。

また、主要なWebフレームワークであるReact、Vue、Svelte、Emberを公式にサポートしている他、Web Componentとしても使用可能であり、SVGコードのコピー・ダウンロードも可能です。そのため、どんなフレームワークでも、静的HTMLであっても、利用することができるように、幅広く整備されています。

実際の設定方法ですが、iconifyのWebサイトにアクセスして使用したいアイコンのページを開きます。
mdi:githubという文字列をコピーしてIconコンポーネントのname属性に指定します。
これで表示されるようになります。

<Icon name="mdi:github" width="24px" height="24px" />

ローカルにある独自のアイコンを使う

iconifyにないアイコンや、デザインツールで書き出した独自のアイコンなどを使いたい場合は、
src/icons/ ディレクトリを作成し、その中にsvgファイルを置くだけでIconコンポーネントで使用できるようになります。
例えば、src/icons/sample.svgをアイコンとして使う場合、name属性にファイル名（今回の場合、”sample”）を指定するだけです。