Element plus与 Element 使用 Icon 方式差别
前言
近期学习 Vue3 + TS 之踩坑日记
Vue3 v3.2.21
TypesSript v4.1.5
Element-Plus v1.1.0-beta.24
使用Icon(图标)方式差别
查看了 Element-plus 官方文档, 发现官方把原有的字体图标向 SVG 图标 迁移, 那使用方式上就发生改变了。 可以看到下面两种 使用方式上的不同， SVG 如果你想像用例一样直接使用，你需要全局注册组件。
Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移，请多多留意更新日志及时获取到更新信息，Font Icon 将会在第一个正式发布被废弃，请尽快迁移。
Font Icon 使用方式
<template> <div> <i class="el-icon-edit"></i> </div> </template> 复制代码
SVG Icon 使用方式
<template> <div> <el-icon :size="size" :color="color"> <edit></edit> </el-icon> <!-- Or use it independently without derive attributes from parent --> <edit></edit> </div> </template> 复制代码
查看单个 SVG 组件源码
<template> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <path d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" stroke="currentColor" fill="none" /> <path d="M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32zm0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32zM96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32zm576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32z" stroke="currentColor" fill="none" /> </svg> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'Aim', }) </script> 复制代码注册 SVG Icon 组件
$ yarn add @element-plus/icons # 或者 $ npm install @element-plus/icons 复制代码
新建 register-icon.ts 文件
import { App } from 'vue' // 引入全部 icon 设置别名 import * as ElIconModules from '@element-plus/icons' // 按需引入 //import { Aim, Phone } from '@element-plus/icons' //const ElIconModules = [Aim, Phone] // 将el-icon的组件名称AbbbCddd转化为i-abbb-cddd形式 // 此前用switch做组件名时因关键字重复报错，所以格式统一加了前缀 // 例：Switch转换为i-switch，ArrowDownBold转换为i-arrow-down-bold function _transElIconName(iconName: string): string { return 'i' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase()) } export function registerIcon(app: App): void { for (const iconName in ElIconModules) { app.component(_transElIconName(iconName), ElIconModules[iconName]) } } 复制代码WARNING
因为 HTML 标准已经定义了一个名为 menu 的标签， 如果您注册的 menu 无法正常工作，您需要使用别名来渲染图标。
作者：前端踩坑人员
链接：https://juejin.cn/post/7031455342114701320