几乎是最优雅的图标方案之二 —— 开发体验改进

书接上回： 几乎是最优雅的图标方案 —— UnoCss的纯css方案

在上回中，尽管unocss的纯css图标解决方案几乎无可挑剔的解决了图标问题，功能性问题解决了，但开发体验仍然有待改进。

假如你有自定义图标i-foo-bar:

  <div class="i-foo-bar" />

按照上回文章所说，这样就能在页面中渲染一个svg图标，还能通过修改其字体大小、背景颜色来修改图标大小与颜色。嗯...似乎缺少点什么？没错，这段字符是手动敲的，也就是缺少了智能提示。我们希望在输入i-...时，能够为我们自动联想到i-foo-bar，最好是能直接预览这个图标。

当然，antfu大神早就考虑到了这个问题，为了iconify的图标制作了一个vscode插件 antfu/vscode-iconify: 🙂，你可以像这样直接获得iconify图标的类型提示并直接预览图标：

这太酷了！你可以在vscode的扩展市场搜索antfu.iconify下载到这个插件。

当然，他也支持自定义图标（尽管在README中根本没有提到这件事 大嘘，这是在我翻阅PR后才发现的）。于是我写了一个打包器插件，来自动化这个过程：unplugin-iconify-generator

$ pnpm i -D unplugin-iconify-generator

它支持大部分打包器，以Vite为例:

import { defineConfig } from 'vite'

import Iconify from 'unplugin-iconify-generator/vite'

export default defineConfig({
  plugins: [
    Iconify({
      collections: {
        foo: './src/assets/icons'
      }
    }),
  ],
})

以上述代码为例，这样你就将src/assets/icons文件夹下所有svg注册为foo前缀的图标。假如你有图标src/assets/icons/bar.svg，你就能像这样获得提示：

  <div class="i-foo-bar" />

除此以外，还有其他一些一般用不着的配置项，请在仓库中查看，这里就不再赘述了。