- 图标
icons
在Vue3
中antdv
已经放弃<a-icon type='xxx'>
的用法了,跟React
一样使用<PlusCircleFilled />
这种标签方式,当需要像以前一样动态切换使用icons
时,就不能通过修改icon
名称切换图标了。 - 现在希望在新的
icons
使用方式上,依然达到使用图片名称就能使用图标,下面以react
的方式实现一下,Vue3
做法一样。
1、新建一个Icon.ts
或Icon.tsx
文件,相当于自己做一个Icon
组件:
import React from 'react' import * as icons from '@ant-design/icons' const Icon = (props: { name: string }) => { const { name } = props const antIcon: { [key: string]: any } = icons return React.createElement(antIcon[name]) } export default Icon
- 2、使用
import Icon from './icon'
{/* 直接将 icon 全名完整填入即可 */} <Icon name='PlusCircleFilled' /> {/* item.icon 为动态传入的标签名称 */} <Icon name={item.icon} />