vue3+elementPlus如何动态渲染icon

第一步: 安装依赖

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

第二步: 全局注册

2.1在入口文件main.ts导入

import * as ElIconModules from '@element-plus/icons';

2.2循环注册icon

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

3.定义数据,使用图标

3.1 模板结构

<el-menu-item v-for="item in iconArr" :key="" :index="item.name">
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
   </el-menu-item>

3.2 数据：

const iconArr = ref([
{name:'', path:'', icon: '对应的icon'}
])