🐱
tailwindcss-iconsでアイコンをTailwindCSSで簡単利用【@iconify/tailwind4版】
この記事は、tailwindcss-iconsでアイコンをTailwindCSSで簡単利用の記事を参考に実装を進めた際、うまくアイコンが表示されない問題にぶつかりました。その原因と解決策をまとめます｡
問題の概要
元記事では以下のような形式でアイコンを指定する方法が紹介されています：
<span className="i-lucide-cat w-10 h-10 animate-spin bg-blue-500"></span>
しかし、最新バージョンの@iconify/tailwind4を使う場合､、この形式ではアイコンが表示されません｡代わりに以下のような形式を使用する必要があります
<span className="icon-[アイコンセット名--アイコン名]"></span>
元記事のコードを直すならこのように｡
<span className="icon-[lucide--cat] w-10 h-10 animate-spin bg-blue-500"></span>
ハイフン2つがポイントです｡(何度かやらかしました…)
まとめ
@iconify/tailwind4のバージョンアップに伴い、アイコンの指定方法が変更されました。元記事の内容は基本的な実装方法として非常に参考になりますが、最新バージョンを使用する場合は、アイコンの指定方法を新しい形式に変更する必要があります。
この記事が、同様の問題に遭遇した方の参考になれば幸いです。
Discussion