在 TailwindCSS 中使用 Iconify 图标

想要在 TailwindCSS 使用 Iconify，首先得安装一个 TailwindCSS 的插件，目前实现的比较好的插件有两个：

第一个是 Iconify 官方实现的插件，但两个插件仅内部实现不一致，用法和效果没有明显区别，根据你的喜好选择就好。

搭配 @iconify/tailwind 使用

首先，需要安装 20 万图标（@iconify/json）和 @iconify/tailwind 插件：

npm i @iconify/json @iconify/tailwind -D

然后，在 tailwind.config.js 中声明插件：

const { addDynamicIconSelectors } = require('@iconify/tailwind')
export default {
  plugins: [addDynamicIconSelectors()]
}

是的，这样就可以了。只要是你能使用 TailwindCSS 样式的地方，你都可以通过一个类名就引入一个图标。比如要使用一个左箭头图标，我们就可以这样写：

<i class="icon-[material-symbols--arrow-back-ios-new]" />

其中，中括号的内容是 {图标库名}--{图标名}，你肯定记不住这么多图标库和图标的名称，这就是 Yesicon 存在的意义，你只需搜索到自己心仪的图标，点击复制代码，然后粘贴到你的代码中即可。

和上面一样，先安装 20 万图标（@iconify/json）和 @egoist/tailwindcss-icons 插件：

npm i @iconify/json @egoist/tailwindcss-icons -D

然后，在 tailwind.config.js 中声明插件：

const { iconsPlugin, dynamicIconsPlugin } = require('@egoist/tailwindcss-icons')
export default {
  plugins: [iconsPlugin(), dynamicIconsPlugin()]
}

现在就可以在任意文件中使用类名了，注意两个插件写法不一致：

<i class="icon-material-symbols-arrow-back-ios-new" />

性能：以上的用法是为了用简单的方式引入最多的图标，但由于 @egoist/tailwindcss-icons 实现了编辑器的自动完成功能，这样引入全部图标会导致编辑器变慢，所以作者更推荐按需使用图标库，具体用法请参考插件的文档

要定义图标颜色和大小，只需定义图标元素或父级元素的文字颜色（color）和大小（font-size）即可：

<i class="icon-[material-symbols--arrow-back-ios-new] text-rose-500 text-2xl" />

比如这个示例中，将这个左箭头图标设置成了玫瑰色，并将图标大小设置为了 24px。