Warning

個人の備忘録的なものなので、間違いがあるかもしれません。

Astro Iconとは

AstroでSVGアイコンを簡単に使えるようにするライブラリ。
自作のアイコンも設定できるらしい。

インストール

本体の追加

1
npx astro add astro-icon

以上のコマンドでインストールできます。
configに追加するか？と聞かれたらyを入力します。

アイコンセットの追加

使用したいアイコンセットをIconifyから探します。

1
npm install @iconify-json/mdi

mdiを追加したいアイコンセットの赤線で囲った部分に置き換えてください。

使用方法

アイコンの表示

1
---
2
import { Icon } from "astro-icon/components"
3
---
4

5
<Icon name="mdi:ab-testing">

nameでアイコンを指定します。

アイコンのスタイル変更

1
<Icon name="mdi:ab-testing">
2

3
<!-- Iconすべてに適用 -->
4
<style>
5
  [data-icon] {
6
    <!-- ここにスタイル -->
7
  }
8
</style>
9

10
<!-- 特定の種類のみに適用 -->
11
<style>
12
  [data-icon="mdi:ab-testing"] {
13
    <!-- ここにスタイル -->
14
  }
15
</style>

参考

astro-iconで手軽にいい感じのアイコンを使わせてもらおう - アルパカログ

Astroでアイコンを簡単に導入できるライブラリastro-iconを紹介します。

alpacat.com

【Astro × Astro Icon】astro-iconの使い方について - Qiita

はじめに Astroでアイコンを設定したいときに検索すると、最もよく出てくるのがastro-iconです。このライブラリを使うと、SVGアイコンやオープンソースのアイコンを簡単に利用できます。 この記事では、その導入方法と使い方を紹介します。 この記事は個人的なアウト...

qiita.com

Astroでastro-iconを使ってみよう

AstroプロジェクトでSVGアイコンを簡単に使えるastro-iconの紹介です。Iconifyのアイコンセット利用やCSSでのカスタマイズも簡単です。

barorin-to.com