ant-design-vue2.x动态渲染icon图标_vue2动态渲染antdesign图标

ant-design-vue2.x官网

原文

1.x版本中的图标渲染是这样子的

<a-icon type="question" />
1

2.x版本中图标渲染：

<QuestionOutlined />
1

应用场景：侧边路由动态渲染图标的2.x版本：

• 安装下icon图标

npm install --save @ant-design/icons-vue
1

1. 新建一个icon.ts

import { createVNode } from 'vue'
import * as $Icon from '@ant-design/icons-vue'

export const Icon = (props: { icon: string }) => {
    const { icon } = props;
    var antIcon: { [key: string]: any } = $Icon;
    return createVNode(antIcon[icon]);
};
1
2
3
4
5
6
7
8

js版本

1. 新建一个icon.js`

import { createVNode } from 'vue'
import * as $Icon from '@ant-design/icons-vue'

export const Icon = (props) => {
    const { icon } = props;
    var antIcon = $Icon;
    return createVNode(antIcon[icon]);
};
1
2
3
4
5
6
7
8

2. 引入并在组件中挂载：

import {Icon} from './Icon'
1

components:{
	Icon
}
1
2
3

3. 使用：

 <Icon :icon="item.icon"></Icon>
1

---

 <template v-for="item in list" :key="item.key">
          <template v-if="!item.children">
            <a-menu-item :key="item.key">
            
              <Icon :icon="item.icon"></Icon>
              
              <span>{{ item.title }}</span>
            </a-menu-item>
          </template>
          <template v-else>
            <sub-menu :menu-info="item" :key="item.key" />
          </template>
        </template>
1
2
3
4
5
6
7
8
9
10
11
12
13

数据：

const list = [
  {
    key: "1",
    title: "Option 1",
    icon:'VideoCameraOutlined'
  },
  {
    key: "2",
    title: "Navigation 2",
    icon:'PieChartOutlined',
    children: [
      {
        key: "2.1",
        title: "Navigation 3",
         icon:'UserOutlined',
        children: [{ key: "2.1.1", title: "Option 2.1.1", icon:'MenuFoldOutlined'}],
      },
    ],
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20