element plus图标全局加载与自动导入

一、全局加载全部

安装图标：

npm install @element-plus/icons-vue

在 main.ts 文件中导入使用

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

使用示例：

<el-icon><Edit /></el-icon>

二、自动导入

安装相关依赖：

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

在 vite.config.ts 中配置使用

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default () => {
  return defineConfig({
    plugins: [
      AutoImport({
        resolvers: [
          // 自动导入图标
          IconsResolver({
            prefix: 'Icon',
          }),
        ],
      }),
      Components({
        resolvers: [
          IconsResolver({
            enabledCollections: ['ep'],
          })
        ],
      }),
      Icons({
        autoInstall: true,
      }),
    ]
  })
})

使用示例：

<i-ep-edit />