ant-design-vue 2.x 中Icon 组件如何动态渲染???

新手上路,请多包涵

vue3.0
ant-design-vue 2.x 中
https://2x.antdv.com/componen...
Icon组件都推荐使用<WindowsOutlined /> 导入组件
放弃之前的 <a-icon type=""/>
那如果我想动态渲染 一组Icon。应该怎么写,如果使用antd自带的Icon,不考虑使用其他插件?

<a-menu-item v-for="item in list" :key="item.name">
    <此处如何动态放置 icon>
    <span>{{item.name}}</span>
</a-menu-item>

例如 js
const list = [

  {
    icon: 'UserOutlined',
    name: 'Home'
  },
  {
    icon: 'UserOutlined',
    name: 'Home'
  },
]
阅读 6.7k
2 个回答

如果是iconfont,设置 createFromIconfontCN 方法参数对象中的 scriptUrl,如果是antv可以使用<template is="xxx" />,当然 icon相关组件需要先引入

引入所有字体组件

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'
import * as antIcons from '@ant-design/icons-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
// 注册组件
Object.keys(antIcons).forEach(key => {
  app.component(key, antIcons[key])
})
// 添加到全局
app.config.globalProperties.$antIcons = antIcons

app.use(Antd).use(router).use(store).mount('#app')

使用:

<template>
    <a-menu-item v-for="item in list" :key="item.name">
        <component :is="$antIcons[item.icon]" />
        <span>{{item.name}}</span>
    </a-menu-item>
</template>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题