小程序 `icon` 解决方案

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

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

立即开始

工程已安装并配置 @egoist/tailwindcss-icons。如需在新项目中接入，可安装依赖：

bash

pnpm add -D @egoist/tailwindcss-icons

TIP

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({
      collections: getIconCollections(["mdi"])
    })
  ]
}

还需要安装对应的图标集合包。当前工程使用 mdi，依赖为 @iconify-json/mdi。

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

页面中可以直接使用 i-mdi-* 类名：

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

Tailwindcss v4

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

css

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

工程入口样式为 src/main.css：

css

@import "tailwindcss";
@source not "dist";
@config "../tailwind.config.js";

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

icon预览挑选网站

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

https://icones.js.org

生成结果

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

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去，然后这里再引用即可。

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

小程序 icon 解决方案 ​

立即开始 ​

Tailwindcss v4 ​

icon预览挑选网站 ​

生成结果 ​

小程序 `icon` 解决方案

立即开始

Tailwindcss v4

icon预览挑选网站

生成结果