Element Plus使用字体图标不生效问题

由于Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移，导致Font Icon方式展示图标用不了

<template>
    //假设icon传递过来的为el-icon-user
 <!-- font Icon形式无法显示 -->
     //element图标
     <i v-if="icon.includes('el-icon')" class="sub-el-icon" :class="icon"></i>
    //其他来源图标
    <i v-else><i/>
</template> 

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    icon:{
    type:String,
    required:true
    }
})
</script>

只能采用Svg icon的形式

//首先安装 element-plus/icons
 npm install @element-plus/icons

//然后在mian.js中，引入，并全局注册
import * as ElementPlusIconsVue from '@element-plus/icons'

//注册
for(const [key,component] of Object.entries(ElementPlusIconsVue)){
    app.component(key,component)
}

然后使用

<template>
      //element图标,假设icon传递过来的为el-icon-user,这样就可以正常展示了
     <el-icon v-if="icon.includes('el-icon')" class="sub-el-icon">
     <component :is="icon.replace('el-icon-','')" />
     </el-icon>
    // 其他来源图标
    <i v-else><i/>
</template>

<script setup>
import { defineProps,computed } from 'vue'
const props = defineProps({
    icon:{
        type:String,
        required:true
    }
})
</script>