526互联

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

发布时间 2023-07-06 21:17:31作者: 青柠i

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(),
          // 自动导入图标组件
          IconsResolver()
        ]
      }),
      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>

解释：

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

{prefix}-{collection}-{icon}

  • prefix是之前配置中设定的

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

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

  • collection是 Iconify的图标集ID

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