Element-Plus实现动态渲染图标的示例代码

npm install element-plus --save
# 或者
yarn add element-plus

import {createApp} from 'vue'
import {createPinia} from 'pinia'

import App from './App.vue'
import router from './router'
const app = createApp(App)

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'dayjs/locale/zh-cn'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {locale: zhCn})
app.use(createPinia())
app.use(router)
app.mount('#app')

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

const app = createApp(App)
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

    <!--  item.id+'' 解决Invalid prop: type check failed for prop "index". Expected String with value "1", got Number with value 1.   -->
    <el-sub-menu v-for="(item,index) in menuAsc" :index="item.id+''">
      <template #title>
        <!--    关键代码    -->
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.name }}</span>
      </template>
      <el-menu-item v-for="(i,num) in menuAsc[index].children" :index="menuAsc[index].children[num].id+''"
                    @click="routerTo(i)">
        {{ i.name }}
      </el-menu-item>
    </el-sub-menu>

svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}