前言

近期学习 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 无法正常工作，您需要使用别名来渲染图标。