vue3+elementPlus如何动态渲染icon

记录一下手撸后台的一些细节。

1.安装依赖。npm install @element-plus/icons-vue

2.全局注册、使用。

2.1在入口文件main.ts导入

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

2.2循环注册icon

for (const name in ElIconModules) {

  app.component(name, (ElIconModules as any)[name])

}

3.定义数据，使用图标。

模板结构：

<el-menu-item v-for="i in items" :key="" :index="">

          <el-icon>

            <component :is="i.icon" />

          </el-icon>

   </el-menu-item>

数据：

const items = ref([

{xxx:'', jjj:'', icon: '对应的icon'}

])

这里对应的icon是elementPlus文档里的icon，如下图：