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

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

環境

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

使ってみる

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

• Icônes

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>

<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>