Vue3！Element Plus 如何像 Element UI 一样使用 Icon?

前言

Vue3 已切换到默认版本，现在新做的项目基本都直接用 Vue3 了， 但是升级到 Element Plus 后很多人都感觉 icon 的使用方式不习惯、不好用，今天就跟大家分享一个简单又方便的方法，用熟悉的方法使用 icon。

只需要用到 UnoCSS

UnoCSS 是 antfu 开发的一个原子化 CSS 引擎，这里就不详细说了，大家感兴趣可以去读一下他的文章【重新构想原子化 CSS】。

• antfu 为 Vue3 生态写了很多优秀的工具，牛逼Plus。

正文开始

以下教程都是只针对 Vite，VueCli 的要自己研究下。

安装依赖

# @iconify-json/ep 是 Element Plus 的图标库
npm i -D unocss @iconify-json/ep

修改 vite.config.ts 配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Unocss from 'unocss/vite'
import { presetIcons } from 'unocss'

export default defineConfig({
  plugins: [
    vue(),

    // 添加以下配置
    Unocss({
      presets: [
        presetIcons({
          scale: 1.2,
          warn: true
        }),
      ],
      // 以下配置是为了可以直接使用标签 
      variants: [
        {
          match: (s) => {
            if (s.startsWith('i-')) {
              return {
                matcher: s,
                selector: (s) => {
                  return s.startsWith('.') ? `${s.slice(1)},${s}` : s
                },
              }
            }
          },
        },
      ],
    })
  ]
})

修改 main.ts

// 在 main.ts 里添加以下代码
import 'uno.css'

可以开始写代码

• 使用方法：前缀 i-ep- + 图标名, i-ep-lock

使用注意

UnoCSS 是关键词匹配按需生成的，所以要注意以下使用方法

如果你的 icon 变量是从接口获取的，要修改 UnoCSS 的配置

Unocss({
  // 添加以下配置, safelist 是预生成 i-ep-lock 的样式不管代码有没有使用这个图标
  safelist: ['i-ep-lock', 'i-ep-menu']
})

快速把整个图标库载入

import epIcons from '@iconify-json/ep'

Unocss({
  // 修改成以下配置
  safelist: [
    ...Object.keys(epIcons.icons.icons).map(name => `i-${epIcons.icons.prefix}-${name}`),
  ],
})

使用任意的图标集

Icônes 可以在这个找自己喜欢的图标集，我们挑 ant design 来说一下。

# 安装依赖
npm i @iconify-json/ant-design -D

完美配合

最后

大家开始愉快的写代码吧。更多的使用配置大家可以去看一下文档，也参考一下我写的一个后台模板里的配置MDAdmin(基于 Vue3 + Ts + ElementPlus)。