Vue3/React 动态设置 ant-design/icons 图标

图标 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} />