Tailwind CSS のクラスでアイコンを表示できる tailwindcss-icons プラグインを使ってみる

ここ数年フロントエンド界隈で利用されているケースを頻繁に見るようになった、ユーティリティファーストな CSS フレームワークの Tailwind CSS。そんな Tailwind CSS を拡張するプラグインに、 クラスを付与するだけでアイコンを表示できるようにする ものがあるようなので使ってみます。

egoist/tailwindcss-icons: Use any icon (100,000+) from Iconify, for TailwindCSS

色々インターネットを探すと無料で利用できるアイコンセットがあり、私もありがたく利用させていただいているのですが、当然のことながら アイコンによって利用方法が異なる ことが多いです。SVG のパスのデータをインポートして使うとか、React や Vue のコンポーネントまで用意されているものなど様々。

それらを 「クラスを付与する」という共通の利用方法で表示できるようにする という、なんとも素敵なプラグインのようです。

環境

私は Nuxt で実装したウェブサイトで Tailwind CSS のプラグインを使用しましたが、他の Tailwind CSS が利用可能な環境でも同様の方法でアイコンを表示できると思います。

Tailwind CSS - 3.4.3
@egoist/tailwindcss-icons - 1.7.4

使ってみる

まずは必要なパッケージをインストールします。@egoist/tailwindcss-icons に加えて、様々なアイコンのデータが含まれている @iconify/json もしくは使用するアイコンだけのデータが含まれている @iconify-json/{collection_name} をインストールする必要があるようです。

@iconify/json は多くのデータが含まれているだけあってサイズが大きい（50MB）ので、今回は使用するアイコンのパッケージをそれぞれインストールします。

$ pnpm add -D @egoist/tailwindcss-icons @iconify-json/ph @iconify-json/simple-icons

今回は Phosphor Icons と Simple Icons を使用します。他にも色々アイコンがあり、Icônes というページで探すことができるようです。

Icônes

続いて tailwind.config.ts の plugins に、インストールしたプラグインを追加します。

getIconCollections 関数の引数に、先ほどインストールした @iconify-json/{collection_name} の {collection_name} を指定します。

import type { Config } from 'tailwindcss'
import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons'

export default {
  content: [...],
  theme: {...},
  plugins: [
    iconsPlugin({ collections: getIconCollections(['ph', 'simple-icons']) }),
    ...
  ]
} satisfies Config

プラグイン導入のための準備はこれだけ。簡単すぎる。

準備ができたので、さっそく使ってみます。以下のような、アイコンのコンポーネントなどをインポートして表示していた箇所があるとします。

<script lang="ts" setup>
import { PhRss } from '@phosphor-icons/vue'
import { siGithub } from 'simple-icons'
</script>

<template>
  <div class="flex items-center gap-2">
    <NuxtLink to="https://xxxxxxx">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-current">
        <path :d="siGithub.path" />
      </svg>
    </NuxtLink>
    <NuxtLink to="https://xxxxxxx">
      <PhRss class="size-5" weight="bold" />
    </NuxtLink>
  </div>
</template>

これは以下のようなコードに置き換えることができます。i-{collection_name}-{icon_name} のようなクラスで、任意のアイコンを表示できます。

<template>
  <div class="flex items-center gap-2">
    <NuxtLink to="https://xxxxxxx">
      <span class="i-simple-icons-github size-5" />
    </NuxtLink>
    <NuxtLink to="https://xxxxxxx">
      <span class="i-ph-rss-bold size-5" />
    </NuxtLink>
  </div>
</template>

また、VSCode で Tailwind CSS IntelliSense の拡張機能を利用している場合は、他の Tailwind CSS のクラスと同じようにサジェストも表示されます。

VSCodeでサジェストが表示される様子の画像

これで「あのアイコンを使うときは何をインポートしてどうやって使うんだっけ…」ということが無くなり、アイコンを扱いやすくなりそうです。便利なプラグインを作成してくださった方々に感謝🙏