Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.4k views
in Technique[技术] by (71.8m points)

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'
  },
]

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...