vite 实现自动导入element plus icons 图标组件

vite.config.js 配置

import { fileURLToPath, URL } from "node:url";
import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";

import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

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

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import VueDevTools from "vite-plugin-vue-devtools";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ["vue", "vue-router"],
      // 生成自动导入的TS声明文件
      dts: "types/auto-import.d.ts", //这个文件会自动生成
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 引入 ant-design-vue 图标
        IconsResolver({
          enabledCollections: ["ep"],
        }),
      ],
    }),
    // 引入 iconfont
    Icons({
      autoInstall: true,
    }),
    VueDevTools(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

• 需要引入的内容:

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

• vite配置

Components({
	resolvers: [
		ElementPlusResolver(),
		// 引入 ant-design-vue 图标
		IconsResolver({
			enabledCollections: ["ep"],
		}),
	],
})

Icons({
	autoInstall: true,
})

使用方式

<template>
  <div class="box">
    <div><i-ep-edit /></div>
    <div><i-ep-chat-dot-round /></div>
    <div><i-ep-close /></div>
  </div>
</template>
<script lang="ts" setup>
// import { ref, reactive, computed, onMounted, nextTick } from 'vue';
</script>
<style lang="stylus" scoped></style>

i-ep-图标名称

全局引入参考

import type { App } from "vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

// 注册所有图标
export function setupElIcons(app: App<Element>) {
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
  }
}

main.ts注册

import { setupElIcons } from "./icons";


export default {
  install(app: App<Element>) {
    // Element-plus图标
    setupElIcons(app);
  },
};