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公式の拡張機能が入っていれば、アイコンもサジェストしてくれる。