svg{ color:#000; position:relative; opacity:.9; width:100%; height:100%; display:block; transition:transform .3s ease;}

言

Vue3 已切換到默認(rèn)版本，現(xiàn)在新做的項(xiàng)目基本都直接用 Vue3 了， 但是升級到 Element Plus 后很多人都感覺 icon 的使用方式不習(xí)慣、不好用，今天就跟大家分享一個簡單又方便的方法，用熟悉的方法使用 icon。

只需要用到 UnoCSS

UnoCSS 是 antfu 開發(fā)的一個原子化 CSS 引擎，這里就不詳細(xì)說了，大家感興趣可以去讀一下他的文章【重新構(gòu)想原子化CSS - 知乎】。

• antfu 為 Vue3 生態(tài)寫了很多優(yōu)秀的工具，牛逼Plus。

正文開始

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

安裝依賴

# @iconify-json/ep 是 Element Plus 的圖標(biāo)庫
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
        }),
      ],
      // 以下配置是為了可以直接使用標(biāo)簽 <i-ep-edit />
      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- + "圖標(biāo)名", "i-ep-lock"

<template>
  <div style="margin: 50px;">
    <el-space direction="vertical" alignment="left">
      <!-- 直接使用 -->
      <el-space>
        <!-- 使用class -->
        <div class="i-ep-lock"></div>
        <!-- 使用標(biāo)簽 -->
        <i-ep-edit />
      </el-space>

      <!-- 組件里使用 -->
      <el-button icon="i-ep-avatar">Button</el-button>

      <el-input prefix-icon="i-ep-search" suffix-icon="i-ep-pointer" ></el-input>

      <el-menu>
        <el-menu-item >
          <el-icon class="i-ep-menu"></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
      </el-menu>

    </el-space>
  </div>
</template>

使用注意

UnoCSS 是關(guān)鍵詞匹配按需生成的，所以要注意以下使用方法

<!-- 錯誤 -->
<script steup>
const icon = 'lock';
</script>

<div :class="`i-ep-${icon}`"></div>
<div :class="`i-ep-${isLock ? 'lock' : 'menu'}`"></div>

<!-- 正確 -->
<script steup>
const icon = 'i-ep-lock';
</script>

<div :class="icon"></div>
<div :class="isLock ? 'i-ep-lock' : 'i-ep-menu'"></div>

如果你的 icon 變量是從接口獲取的，要修改 UnoCSS 的配置

Unocss({
  // 添加以下配置, safelist 是預(yù)生成 i-ep-lock 的樣式不管代碼有沒有使用這個圖標(biāo)
  safelist: ['i-ep-lock', 'i-ep-menu']
})

快速把整個圖標(biāo)庫載入

import epIcons from '@iconify-json/ep'

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

使用任意的圖標(biāo)集

Ic?nes 可以在這個找自己喜歡的圖標(biāo)集，我們挑 ant design 來說一下。

# 安裝依賴
npm i @iconify-json/ant-design -D

<template>
  <div style="margin: 50px;">
    <el-space direction="vertical" alignment="center">

      <!-- 直接使用 -->
      <el-space>
        <div class="i-ant-design:account-book-filled"></div>
        <i-ant-design:carry-out-twotone />
      </el-space>

      <!-- 組件里使用 -->
      <el-button icon="i-ant-design:percentage-outlined">Button</el-button>

      <el-input prefix-icon="i-ant-design:search-outlined" suffix-icon="i-ant-design:heart-filled" ></el-input>

      <el-menu>
        <el-menu-item >
          <el-icon class="i-ant-design:align-center-outlined"></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
      </el-menu>

    </el-space>

  </div>
</template>

完美配合

最后

大家開始愉快地寫代碼吧。更多的使用配置大家可以去看一下文檔，也參考一下我寫的一個后臺模板里的配置MDAdmin(基于 Vue3 + Ts + Element Plus)。