集成 iconifly 方案

前言

在这里 issue 中讨论了下方案：关于项目中的 SVG 标签影响代码可读性问题

• Iconify for Tailwind CSS - 教你怎么在 tailwind 里面用 iconify
• Innei/Shiro - 内神的项目已经很全面了，也是 tailwind + iconify，参考 icon 方案

Icon 预览网站

• Icon Sets - Iconify - iconify 官方的图标检索平台
• Icônes - 托尼写的图标检索平台，体验下来，比官方的好用多了

egoist/tailwindcss-icons 方案（选择）

优缺点

• 优点：智能提示很舒服，写法上更偏向 unocss 的使用
• 缺点：带来的问题就是开销更大，因为它是直接把全部的 icon 生成在 components 里, 然后再交给 Tailwind CSS 从里面进行挑选再输出到我们的 css 文件中的，不过问题不大

安装依赖

pnpm add -D @egoist/tailwindcss-icons

# 这里拿 Phosphor Icons 用于示例，正好项目中也有需要用到的
pnpm add -D @iconify-json/ph

配置 tailwind.config.js 文件

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

export default {
  plugins: [
    iconsPlugin({
      // 配置需要的 icon 包就行（需要安装）
      collections: getIconCollections(["mdi", "lucide"]),
    }),
  ],
}

使用示例

<!-- pattern: i-{collection_name}-{icon_name} -->
<span class="i-mdi-home"></span>

在 IDE 中真实使用体验

iconify/tailwind 方案（舍弃）

优缺点

• 优点：基于 JIT 动态加载生成，开发时开销更小
• 缺点：写法有点恶心 + 没有提示

pnpm add -D @iconify/tailwind

配置 tailwind.config.js 文件

const { addDynamicIconSelectors } = require("@iconify/tailwind");

export default {
  plugins: [addDynamicIconSelectors()],
}

使用示例

<span class="icon-[mdi-light--home]"></span>