小程序 icon 解决方案 == iconify

Iconify 是一套面向开发者和设计师的工具，旨在让他们能够以一致的方式轻松使用不同的图标集。

其中包括：

超过 27.5 万个图标，来自 200 多个开源图标集，全部经过清理、优化和更新。
用于导入、导出和整理图标的工具。
用于渲染图标的组件和插件。
供 UI 开发人员浏览图标并将其导入设计工具的插件。
提供用于浏览、搜索图标集和检索图标数据的公共 API。

这里介绍一种在小程序里，开箱即用的 icon 解决方案：iconify

很高兴，我们已经有这样的能力，为小程序提供大量的 icon, 供我们开发者自己进行选择。

立即开始

首先，在已经安装和配置完本插件之后，安装 @egoist/tailwindcss-icons

复制代码

npm i -D @egoist/tailwindcss-icons

提示

Iconify for Tailwind CSS 其实给我们提供了两种选择： @iconify/tailwind 和 @egoist/tailwindcss-icons

个人用下来，感觉 @egoist/tailwindcss-icons 更好用一点，智能提示也更好一些。

因为它是直接把全部的 icon 生成在 components 里, 然后再交给 Tailwind CSS 从里面进行挑选再输出到我们的 css 文件中的。

而 @iconify/tailwind 走的是 jit 动态加载生成，但是没有智能提示加 <span class="icon-[mdi-light--home]"></span> 不好用啊，笑～。

详见 https://iconify.design/docs/usage/css/tailwind/

然后在 tailwind.config.js 注册插件:

复制代码

import { iconsPlugin, getIconCollections } from "@egoist/tailwindcss-icons"

export default {
  plugins: [
    iconsPlugin({
      // Select the icon collections you want to use
      collections: getIconCollections(["mdi", "lucide"]),
    })
  ]
}

后你还要安装你挑选的 icon 集合包，比如你选择了 "mdi" 和 "lucide"

那你就要安装: @iconify-json/mdi 和 @iconify-json/lucide (包名的规则就是：@iconify-json/{collection_name})

当然你也可以直接安装 @iconify/json，这里面包含了所有的 icon,不过代价就是，这个包比较大（50MB+）

然后你回到你的页面，输入 i- 智能提示就出来了，然后就可以这么写了：

<view class="i-mdi-home text-3xl text-red-600"></view>

假如不起作用，Tailwindcss@3 的话，请检查你的 @tailwind components; / @import 'tailwindcss/components';(scss) 是否在入口 css/scss 中引入

Tailwindcss v4

在 Tailwindcss@4 中，不会自动读取 tailwind.config.js 文件，所以你需要使用 @config 指令，手动引入 tailwindcss 的配置文件。

复制代码

@import "tailwindcss";
/* 添加下面这一行，路径为你创建的 tailwind.config.js 文件路径 */
@config "../tailwind.config.js";

注意：weapp-tailwindcss 的 rewriteCssImports 选项会自动将 @import 'tailwindcss' 改写为 @import 'weapp-tailwindcss/index.css'。如果遇到报错或样式不生效，请手动改为 @import 'weapp-tailwindcss/index.css'。

这样在 tailwindcss@4 中才能起效果

icon预览挑选网站

挑选自己喜欢的icon库然后去下边找包名

https://icon-sets.iconify.design/

包名查找

https://github.com/iconify/icon-sets/tree/master/json

生成结果

我们以 i-mdi-home 这个类的css 生成结果为例：

复制代码

.i-mdi-home{
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  --svg: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 width=%2724%27 height=%2724%27%3E%3Cpath fill=%27black%27 d=%27M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z%27/%3E%3C/svg%3E");
}

是的，它是通过 css var 的方式，把 svg 给内联了（inline）了进来，然后通过 mask-image 来把图形给显示出来的。显然，这用多了 icon 之后会造成生成的 css 体积大的问题。

对此还有 mask-image 和 css var 在部分机器上不兼容的问题。

对此有解决方案吗？显然是有的，比如我们可以把它做成一个 webfont，更改每一个 icon component class，把里面换成字体，达到类似 iconfont 的效果，最后再生成一份 ttf/woff 等文件上传到自己的 cdn去，然后这里再引用即可。

这样小程序体积又小，兼容性也好，就是多了些网络请求罢了,我们自己取舍吧。

如果图标没有预览效果，请安装 VSCode 插件 antfu.iconify

.vscode/settings.json配置如下

复制代码

{
  // 保存文件时是否自动格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit" // 保存时自动修复 ESLint 报错
  },
  // twwindcss 提示
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "files.associations": {
    "*.css": "tailwindcss"
  },

  "tailwindCSS.experimental.configFile": "src/main.css",
  // iconify 提示
  "iconify.includes": ["bx"]
}

复制代码

小程序 icon 解决方案 == iconify

立即开始​

Tailwindcss v4​

icon预览挑选网站

生成结果​

立即开始

Tailwindcss v4

生成结果