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