Skip to main content

Mini program icon solution

Here is an out-of-the-box icon solution for mini programs: iconify

We are very happy that we already have the ability to provide a large number of icon for small programs for our developers to choose.

Start now​

First, after you have installed and configured this plug-in, install @egoist/tailwindcss-icons

npm i -D @egoist/tailwindcss-icons
tip

Iconify for Tailwind CSS actually provides us with two options: @iconify/tailwind and @egoist/tailwindcss-icons

After personal use, I feel that @egoist/tailwindcss-icons is more useful and has better smart prompts.

Because it directly generates all icon in components, and then gives it to Tailwind CSS to select from it and output it to our css file.

And @iconify/tailwind is generated by dynamic loading of jit, but there is no smart prompt and <span class="icon-[mdi-light--home]"></span> is not easy to use, lol~.

See https://iconify.design/docs/usage/css/tailwind/ for details

Then register the plugin in tailwind.config.js:

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

module.exports = {
  plugins: [
    iconsPlugin({
      // Select the icon collections you want to use
      collections: getIconCollections(["mdi", "lucide"]),
    }),
  ],
}

Then you also need to install the icon collection package of your choice, for example, if you choose "mdi" and "lucide"

Then you need to install: @iconify-json/mdi and @iconify-json/lucide (the rule for package names is: @iconify-json/{collection_name})

Of course, you can also install @iconify/json directly, which contains all icon, but the price is that this package is relatively large (50MB+)

Then you go back to your page, enter i- and the smart prompt will appear, and then you can write like this:

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

Tailwindcss v4​

In Tailwindcss@4, the tailwind.config.js file is not automatically read, so you need to use the @config directive to manually introduce the tailwindcss configuration file.

Iconify recommends using @iconify/tailwind4 and registering it directly in the Tailwind entrance CSS:

@import "tailwindcss";
@plugin "@iconify/tailwind4";

/* Add the following line, the path is the path to the tailwind.config.js file you created */
@config "../tailwind.config.js";

Note: It is recommended to directly write tailwindcss@4 for the actual runtime entry of weapp-tailwindcss@5 + @import 'tailwindcss'. The builder parses the target CSS in the Tailwind v4 applet generation link. The Iconify v4 plug-in should also be registered with the entry CSS and no longer written to tailwind.config.js of plugins.

This will work in tailwindcss@4

icon preview select website​

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

<PROTECTED_0>

Generate results​

Let's take the i-mdi-home generated result of the css class as an example:

.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");
}

Yes, it uses css var to inline svg (inline), and then displays the graphics through mask-image. Obviously, using too much icon will cause the problem of large size of the generated css.

There is also the issue of mask-image and css var being incompatible on some machines.

Is there a solution for this? Obviously there is. For example, we can make it into an webfont, change each icon component class, change it to a font, to achieve an effect similar to iconfont, and finally generate a file such as ttf/woff and upload it to our own cdn, and then reference it here.

This kind of small program is small in size and has good compatibility. It just requires more network requests. Let's make our own choice.