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

はじめに

astro-iconはAstroプロジェクトでSVGアイコンを簡単に使用できるようにするためのライブラリです。 また、Iconify¹ のアイコンセットを使用することも可能です。

このブログでも採用しているのですが、コード量が減る上に、Tailwind CSSでカスタマイズできるのでかなり便利です。

インストール方法

astro-icon本体のインストール

$ npx astro add astro-icon

Iconifyを利用するためには、npm install @iconify-json/*でアイコンセットごとにインストールする必要があります。
アイコンセットは公式のIcon Set Explorerまたは Icônesから検索できます。
なお、赤枠部分が*に入ります。

$ npm install @iconify-json/mdi

使い方

アイコンセットを使う

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

<Icon name="mdi:account" />

ローカルのsvgファイルを使う

ローカルのsvgファイルを使う場合、デフォルトフォルダはsrc/iconsになっています。

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

<!-- `/src/icons/account.svg`を読み取る -->
<Icon name="account" />

<!-- `/src/icons/hoge/account.svg`を読み取る -->
<Icon name="hoge/account" />

デフォルトフォルダの変更

デフォルトフォルダを変更したい場合はastro.config.mjsで。

// astro.config.mjs
import { defineConfig } from "astro/config";
import icon from "astro-icon";

export default defineConfig({
  // ...
  integrations: [
    icon({
      // `src/assets/icons`にする
      iconDir: "src/assets/icons",
    }),
  ],
});

スタイリング方法

styleタグを使う

<Icon name="account" />

<!-- Icon全体に適用したい場合 -->
<style>
  [data-icon] {
    font-size: 2rem;
    color: var(--brand-color);
  }
</style>

<!-- nameで絞りたい場合 -->
<style>
  [data-icon="account"] {
      font-size: 2rem;
      color: var(--brand-color);
  }
</style>

Tailwind CSSを使う

まずは、@astrojs/tailwindをいれる。
基本的に質問にはyでOK。

$ npx astro add tailwind

あとは通常の使い方と同じ！

<Icon name="account" class="text-xl text-green-600" />

Footnotes

1. オープンソースのアイコンセットを標準化して配布するプロジェクトです。 ↩