(vue3)vite+TS+element-plus icon图标自动导入实现方法

项目框架：vite+TS（vue3）

1.安装 element-plus

npm install element-plus --save
# 或者  简写
npm i element-plus -S

线上环境需要使用 element-plus，所以 ’ -S '，安装 element-plus 并保存 项目依赖信息到 “ package.json ” 的 “dependencies” 下。

2.安装 icon 图标库

npm install @element-plus/icons-vue -S

3.安装 unplugin-icons、unplugin-auto-import

npm install -D unplugin-icons unplugin-auto-import

“ -D ” 表示安装并保存依赖包信息到 package.json ” 的 “devDependencies” 下，这两个包时帮助 icon 自动导入的，开发环境使用，生产环境不需要，所以 “-D”就行。

4.添加 “vite.config.ts” 配置

// 导入包
import AutoImport from 'unplugin-auto-import/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
    
    
  // 添加自动导入配置
  plugins: [
    AutoImport({
    
    
      resolvers: [
        // 自动导入图标组件
        IconsResolver({
    
    
          prefix: 'Icon',
        }),
      ],
    }),
    Components({
    
    
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
    
    
          enabledCollections: ['ep'],
        }),
      ],
    }),
    Icons({
    
    
      autoInstall: true,
    }),
  ],
 })

如图所示：

5.使用方法

查找 element-plus 官网中要使用的 icon ，在 官网icon名称前加上 “i-ep-” 前缀，就可以直接使用图标了：
模板：

<i-ep-图标名 />

或者：

<el-icon><i-ep-图标名 /></el-icon>

示例：

<i-ep-document />

更多操作知识可查阅官网文档：
https://element-plus.gitee.io/zh-CN/component/icon.html