Element-Plus从font-icon迁移至SVG-icon

新版的Element-Plus弃用了之前的font-icon写法：

<template>
	<i class="el-icon-edit"></i>
</template>

而改为了SVG-icon写法：

<template>
	<el-icon :size="size" :color="color">
	   	<edit />
	</el-icon>
	<edit></edit>
</template>

解决方法1 动态组件

谷歌搜索有人说动态组件可以用于这种情况：
googled someone says dynamic component can be used on this situation:

<template>
	<component is="edit" />
</template>

Github Issue

解决方法2 预处理

在官方提供的导入图标的指南中，要求我们创建如下内容：

	// main.ts
	
	// 如果您正在使用CDN引入，请删除下面一行。
	import * as ElementPlusIconsVue from '@element-plus/icons-vue'
	
	const app = createApp(App)
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	  app.component(key, component)
	}

可以通过修改部分代码实现以新方式导入：

import { App } from 'vue'
// Introduce all icon Set alias 
import * as ElIconModules from '@element-plus/icons'
// Introduce on demand 
//import { Aim, Phone } from '@element-plus/icons'
//const ElIconModules = [Aim, Phone]
// take el-icon Component name for AbbbCddd Turn into i-abbb-cddd form 
// Used before switch When making a component name, an error is reported due to repeated keywords , So the format is uniformly prefixed 
// example ：Switch Convert to i-switch,ArrowDownBold Convert to 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])
}
}