VUE2老版本

在原本的版本中可以通过如下方法动态生成icon图标（此处不展示 asideList 里面的数据）

<template v-for="aside in asideList" :key="aside.path">
    <el-sub-menu v-if="aside.children && aside.children.length > 0" :index="aside.path">
      <template #title>
        <i :class="aside.meta.icon"></i>
        <span>{{ aside.meta.title }}</span>
      </template>
      <AsideItem :asideList="aside.children"></AsideItem>
    </el-sub-menu>
    <el-menu-item v-else :index="aside.path" style="color: white; font-weight: 500; font-size: 15px;">
      <i :class="aside.meta.icon"></i>
      <span>{{ aside.meta.title }}</span>
    </el-menu-item>
  </template>

官网vue2中仍是老方法，给出的如下列子

<template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>

VUE3 新版本 el-plus

          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>

基本使用方法为：

1.安装

npm install @element-plus/icons

import { Fold } from '@element-plus/icons'

<el-icon> 
    <Fold /> 
</el-icon>

// 统一导入 element 图标
import * as Icons from '@element-plus/icons'

// 注册全局 element-icons 组件
Object.keys(Icons).forEach((key) => {
    console.log(key);
    app.component(key, Icons[key as keyof typeof Icons])
})

<template #title>
    <i v-if="aside.meta.icon && aside.meta.icon.includes('el-icon')"             
    :class="aside.meta.icon"></i>
     <component class="icons" v-else :is="aside.meta.icon"></component>
     <span>{{ aside.meta.title }}</span>
</template>