Vue3 + Vite + Element Plus项目中自动引入 icon 的具体操作及使用方式

Vue3 + Vite + Element Plus项目中自动引入 icon 的具体操作及使用方式

1. 安装插件

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

2. 修改 vite.config.js 文件

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import { resolve } from 'path'
   import AutoImport from 'unplugin-auto-import/vite'
   import Components from 'unplugin-vue-components/vite'
   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
   import Icons from 'unplugin-icons/vite'
   import IconsResolver from 'unplugin-icons/resolver'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     resolve: {
       // 配置'@'路径别名
       alias: {
         '@' : resolve(__dirname, 'src')
       }
     },
     plugins: [
       vue(),
       AutoImport({
         // 自动导入 Vue 和 Vue-router 相关函数，如 ref, reactive, createRouter 等
         imports: ['vue', 'vue-router'],
         resolvers: [
           // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
           ElementPlusResolver(),
           // 自动导入图标组件
           IconsResolver({
             prefix: 'Icon',
           })
         ],
       }),
       Components({
         resolvers: [
           // 自动导入 Element Plus 组件
           ElementPlusResolver(),
           // 自动注册图标组件
           IconsResolver({
             // ep 是 Element Plus 的缩写
             enabledCollections: ['ep'],
           })
         ],
       }),
       Icons({
         autoInstall: true,
       })
     ]
   })
   

3. 使用注意点

   // 自动引入后，发现以下写法不能显示 icon 的图标
   <el-icon size="20">
       <Edit />
   </el-icon>
    
   // 正确的写法是
   <el-icon size="20">
   	<i-ep-edit />
   </el-icon>
    
   // 或者
   <i-ep-edit />