关于前端:Vue3Element-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
        }),
      ],
      // 以下配置是为了能够间接应用标签 <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- + 图标名, i-ep-lock

<template>
  <div style="margin: 50px;">
    <el-space direction="vertical" alignment="left">
      <!-- 间接应用 -->
      <el-space>
        <!-- 应用 class -->
        <div class="i-ep-lock"></div>
        <!-- 应用标签 -->
        <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 是关键词匹配按需生成的，所以要留神以下应用办法

<!-- 谬误 -->
<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 是预生成 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

<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 + ElementPlus)。