🌟

Tailwindcssでアイコンを使いたい

2024/07/19に公開

Tailwind CSS

icon

tech

Tailwindcssでアイコンライブラリを余計に入れたくなくて、Tailwindcssでアイコンが表現できて、補完もきくライブラリを探したところあった

それが、@egoist/tailwindcss-iconsというライブラリ

良かったこと

Tailwindcssのクラス名と同様、候補が表示される

条件分岐が楽
アイコンコンポーネントだと三項演算子などで場合分けが必要だけど、これを使うことで、cnで条件分岐できる
(クラス名なので)

My 設定

自分の場合、これだけ入れておけば十分だった

import { iconsPlugin, getIconCollections } from "@egoist/tailwindcss-icons";

  plugins: [
    iconsPlugin({
      collections: getIconCollections([
        "mdi",
        "ic",
        "ph",
        "tabler",
        "fa",
        "fa6-regular",
        "fa6-solid",
        "fa6-brands",
        "lucide",
      ]),
    }),
  ],

ic

それぞれのアイコンのパッケージは以下の通り。
なぜかGoogle Material iconはicなので注意！

    "@iconify-json/fa": "^1.1.8",
    "@iconify-json/fa6-brands": "^1.1.20",
    "@iconify-json/fa6-regular": "^1.1.20",
    "@iconify-json/fa6-solid": "^1.1.22",
    "@iconify-json/ic": "^1.1.17",
    "@iconify-json/lucide": "^1.1.198",
    "@iconify-json/mdi": "^1.1.67",
    "@iconify-json/ph": "^1.1.13",
    "@iconify-json/tabler": "^1.1.116",

loader2

ローディングのくるくるには、Lucideのloader2をよく使う

<div className="i-lucide-loader-2 animate-spin" />

良かったこと

My 設定

ic

loader2

Discussion