element-plus图标自动导入

1.需要安装两个插件

npm i -D unplugin-icons unplugin-vue-components

2.下载图标库

npm i @iconify-json/ep

3.配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver(),
      ],
    }),
    Icons(),
  ],
})

4.使用图标

<template>
    <!-- 自动导入必须遵循名称格式 {prefix：默认为i}-{collection：图标集合的名称}-{icon：图标名称}  -->
   <i-ep-expand />
</template>