vue3+vite+ts 使用iconify图标库

下载依赖包

npm install unplugin-icons --save-dev
npm install unplugin-vue-components --save-dev

如果图标集选择的ep（ElmentPlus），则还需要安装 @iconify-json/ep 包。

npm install @iconify-json/ep --save-dev

配置

打开vite.config.ts文件，配置如下内容：

import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import Components from "unplugin-vue-components/vite";

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    Components({
        resolvers: [
          // 自动注册图标组件
          IconsResolver({
            // 只显示 ElementPlus 图标集
            enabledCollections: ["ep"],
          }),
        ],
      }),
      Icons({
        // 自动安装图标库
        autoInstall: true,
      })
  ]
})

页面使用

常用的图标如下所示，前面 i-ep- 是固定格式。

查询：<i-ep-search /><br/>
降序：<i-ep-caret-top /><br/>
升序：<i-ep-caret-bottom /><br/>
编辑：<i-ep-edit /><br/>
删除：<i-ep-delete /><br/>
添加：<i-ep-plus /><br/>
关闭：<i-ep-close /><br/>
刷新：<i-ep-refresh /><br/>
字典：<i-ep-Collection /><br/>
分配：<i-ep-position />

如果想要知道更多的图标对应的代码可参考elmentplus官网，找到Icon模块

https://element-plus.org/zh-CN/component/icon.html。