vite 实现全局自动导入iconify 图标库组件方式

iconify

https://iconify.design/
Iconify支持100多个图标集，上万种图标可随意使用，你能想到的他都有，Iconify是SVG图标，不是字体图标，所以你也可以结合elementui-plus使用，最后感谢antfu大佬提供的vite插件。

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-图标名称

最终渲染出来的是svg html