关于Element Plus 图标 el-icon 遍历？

Question

Element Plus 3.0 版本必须以结合 el-icon 使用，我在路由写成：

  {
    path: "/index",
    name: "Index",
    hidden: true,
    component: () => import("../views/home/index.vue"),
    meta: {
      name: "首页",
     icon: "<el-icon><User /></el-icon>",
    },
  },

在vue3遍历出来：

<template v-for="(item, index) in routers">
        <el-sub-menu v-if="!item.hidden" :key="item.id" :index="index">
          <template #title>
            <div v-html:"item.meta.icon"></div>
            <span>{{ item.meta.name }}</span>
          </template>
        </el-sub-menu>
      </template>

问题是，渲染出来<el-icon>外面包了个<DIV> 显示不出来图标，只能去掉DIV

官方这样写不会出问题：
<el-icon><xxxx /></el-icon>

如何在没DIV情况下可以渲染出来？ 有啥办法么？

<template v-for="(item, index) in routers">
        <el-sub-menu v-if="!item.hidden" :key="item.id" :index="index">
          <template #title>
            <el-icon> 这里遍历出来 </el-icon>
            <span>{{ item.meta.name }}</span>
          </template>
        </el-sub-menu>
      </template>

Answer 1

{
    path: "/index",
    name: "Index",
    hidden: true,
    component: () => import("../views/home/index.vue"),
    meta: {
      name: "首页",
     icon: "User", //这里直接用icon name
    },
  },
<template v-for="(item, index) in routers">
        <el-sub-menu v-if="!item.hidden" :key="item.id" :index="index">
          <template #title>
            <component  :is="item.meta.icon"> //这里有component
            <span>{{ item.meta.name }}</span> 
          </template>
        </el-sub-menu>
      </template>