element-plus 动态生成图标

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

2 、引入图标

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

3 、使用方式

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

动态生成菜单时使用 Element Plus 图标:

1.main.ts  注册全局组件

// 统一导入 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])
})

可以log看一下key，如图，就是 el-plus 所有的 icon

 2.注册完后使用

判断 如果icon 里面包括原来的 el-icon 的字段就用老版本的，否则就用全局注册的组件  component :='  xxxxx  '

<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>

另外不要忘了 给 component 样式，不如图标会非常大，毕竟现在是 svg