Element Plus 实现Icon图标的自动导入

Element Plus 官方文档对于Icon图标的自动导入，言之甚少。故博主来写篇文章总结一下，如何正确使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入图标。

1. 安装依赖

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

PS: 如果你之前配置ElementPlus组件为“按需导入”，那就只用下unplugin-icons。

2. 修改配置文件

这里以vue.config.js为例（这里配置包含组件按需导入以及图标自动导入）：

const { defineConfig } = require('@vue/cli-service');

// 按需引入ElementPlus组件
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

// 自动导入Icon图标
const IconsResolver = require('unplugin-icons/resolver');
const Icons = require('unplugin-icons/webpack');

module.exports = defineConfig({
  // ......
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [
          // 这个是组件自动导入
          ElementPlusResolver()
        ]
      }),
      Components({
        resolvers: [
          // 自动注册图标组件
          IconsResolver({
            // 修改Icon组件前缀，不设置则默认为i,禁用则设置为false
            prefix: 'icon',
            // 指定collection，即指定为elementplus图标集ep
            enabledCollections: ['ep']
          }),
          // 这个是组件自动导入
          ElementPlusResolver()
        ]
      }),
      // Icons图标自动下载
      Icons({
        autoInstall: true
      })
    ]
  },
});

3. 图标的使用

<template>
  <!-- 在文档中复制icon图标后，这样的写法是不生效的 -->
  <el-icon>
    <Aim />
  </el-icon>
  <!-- 正确写法 -->
  <el-icon>
    <icon-ep-aim />
  </el-icon>
  <!-- 或 -->
  <icon-ep-aim />
</template>

例子：

    <el-row justify="center">
      <!-- 默认的不行 -->
      <!-- <el-icon><Female /></el-icon> -->

      <!-- 配置为 prefix: "icon" 时 -->
      <!-- <el-icon><icon-ep-MessageBox /></el-icon>
        <el-icon><icon-ep-female /></el-icon>
        <el-icon><icon-ep-add-location /></el-icon> -->
      <!-- prefix: "fct" -->
      <el-icon><FctEpApple /></el-icon>

      <!-- prefix走默认配置时  -->
      <!-- <el-icon><i-ep-add-location /></el-icon> -->

      <!-- 禁用prefix配置时, prefix: false  -->
      <el-icon><ep-MessageBox /></el-icon>
      <el-icon><EpSuccessFilled /></el-icon>
</el-row>

解释：

使用组件解析器IconsResolver时，必须遵循名称转换才能正确推断图标，格式如下:

{prefix}-{collection}-{icon}

• prefix是之前配置中设定的

  默认情况下，前缀设置为i，而您可以通过配置进行自定义

  IconsResolver({
    prefix: 'icon', 
    // prefix: 'icon', // 支持非前缀模式
  })
  

• collection是 Iconify的图标集ID

• icon即为该图标集中某个图标的name