Iconify for Tailwind CSSのすすめ
Tailwind CSSのユーティリティクラスとしていろんなアイコンを表示できるライブラリ
About Me
https://github.com/lacolaco.png
どうして私がレビュアーに？
なんでなんでしょう... subalさんが声かけてくれなかったらまさかレビュアーになるとは思ってなかった。個人開発では最近はTailwindCSSでしかスタイル書いてないです。
こんなブログ書いてます
https://blog.lacolaco.net/og/two-sides-of-tailwindcss.png
https://blog.lacolaco.net/_astro/80fc96c9-18c7-4f83-874c-c1cab7de24f9.TNRR8CL8_16qkHK.webp
https://blog.lacolaco.net/og/angular-tailwindcss-styling-thoughts.png
Iconify
さまざまなオープンソースのアイコンライブラリを横断してひとつのフレームワーク内で使えるようにしようというもの
You can use many open source icon sets with a large choice of open source icon components. Thousands of high-quality icons from 100+ icon sets, all validated, cleaned up, optimised and always up to date.
Iconifyの使い方
Iconifyの実態はさまざまなアイコンのデータセット
UIライブラリの部分はキーでアイコンデータを参照して表示するだけ
Web Components / React / Vue / ... いろいろな実装がある
Iconify for Tailwind CSS
Tailwind CSSのユーティリティクラスでアイコン表示の指定ができるようになるプラグイン
heroiconsと違うところ
Tailwind CSSさえ機能していればどんなフレームワークやライブラリの上でも動く
2つの実装があり、ユーティリティクラスの指定方法が違う
@iconify/tailwind
Iconify公式
<span class="icon-[mdi-light--home]"></span>
icon- プレフィックスの後に [アイコンセット--アイコン名] で指定する
ビルド時に動的にクラス生成するので、入力補完には出ない
@egoist/tailwindcss-icons
<span class="i-mdi-light-home"></span>
すべてのアイコンに対応するクラスをあらかじめ生成してあるため、すべて入力補完に出てくる
普通のユーティリティクラスと同じように不使用のクラスはビルド時にpurgeされる
今回は @iconify/tailwind のほうで紹介
導入 - npm package
2つのパッケージをインストールする
code:shell
npm i -D @iconify/json @iconify/tailwind
@iconify/json: Iconinyのすべてのアイコンのデータセット
特定のアイコンセットだけに絞る場合は @iconify-json/mdi のような個別パッケージも用意されている
導入 - tailwind.config
tailwind.config.js で @iconify/tailwind からインポートした addDynamicIconSelectors をプラグインに追加するだけ。
code:js
const { addDynamicIconSelectors } = require('@iconify/tailwind');
module.exports = {
plugins: [
// Iconify plugin
addDynamicIconSelectors(),
],
};
使用
あとは使うだけ
実体は mask-image を使って表示されたSVG画像
width と height はそれぞれ 1em なので font-size でサイズ変更できる
background-color: currentColor になっているので、colorで色変更できる
code:html
<button class="text-default leading-0 rounded-full p-1">
</button>
https://scrapbox.io/files/65e5b8248b988e0023a9c58d.png
https://scrapbox.io/files/65e5b851d1f1c90025e90dc0.png
まとめ
Tailwind CSS導入済みのプロジェクトにちょっとアイコンが欲しくなったらおすすめです