note.sorakakeru.info

Tailwind CSSでiconを使用する

@egoist/tailwindcss-iconsを利用する方法。

Terminal window
npm i @egoist/tailwindcss-icons -D

tailwind.config.jsを編集する。
アイコンはIcônesのものを使用できる。ここではPhosphorを設定している。
使用するアイコンの指定は、アイコンページurlの/collection/のあとの文言を使用する。Phosphorであればph。

const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons');


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./www/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [
    iconsPlugin({
      collections: getIconCollections(['ph'])
    }),
  ],
}

使用するアイコンの種類によっては、cssファイルをビルドしたときにエラーが発生する。

Terminal window
Rebuilding...
Error: Icon collection "ph" not found. Please install @iconify-json/ph or @iconify/json
（以下略）

この場合、書いてある通り追加でモジュールをインストールする。
個人的には全部インストールする方を選ぶが、使用するアイコンごとに個別にインストールしてもOK。

Terminal window
# 全部インストール
npm i @iconify/json -D


# 個別にインストール
npm i @iconify-json/ph @iconify-json/lucide -D

htmlのclassにアイコンを指定する場合は、i-(使用するアイコンの名称)-(アイコンのclass名)を指定する。Phosphorであれば、i-ph-xxx。
VSCodeの場合、Tailwind CSS公式の拡張機能が入っていれば、アイコンもサジェストしてくれる。