ant design for vue3 以及 vue3中关于图标的在ts的处理

Question

现在图标是这样处理的

  // icon
  let icons: {
    [key: string]: Component
  } = Icons;

  Object.keys(Icons).forEach(key => {
    app.component(key, icons[key])
  })

  app.config.globalProperties.$icons = icons;

比如是这样使用的（很多图标都是配置文件配置的，所以需要通过变量控制）

<component :is="$icons[item.icon]"></component>

使用起来没有任何问题，就是看着报错眼痛，不知道怎么解决：

更新

感谢NickWang 947的回答，提出了问题的本质：问题在于将$icons直接挂到globalProperties上

由此想到两种思路：

1. 如NickWang 947答案重新封装，答案给了很好的思路

2. 既然挂到globalProperties上是不对的，那么就给他正名下，参考https://stackoverflow.com/que...
   第二点实施起来的话就是添加一个.d.ts文件，然后

   import { Component } from 'vue';
   declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
    $icons:  {
      [key: string]: Component
    };
     }
   }

Answer 1

vue不熟，但是查了一下vue也有createElement方法，所以放一下我的react版本，希望对你有帮助。

import React from 'react';
import { IconFontProps } from '@ant-design/icons/lib/components/IconFont';
import * as AntdIcon from '@ant-design/icons';

const Icon: React.FC<IconFontProps> = (props) => {
  const { type, ...attributes } = props;

  return React.createElement(AntdIcon[type], attributes);
};

export default Icon;

// <Icon type="HeartTwoTone" twoToneColor="#eb2f96" />

其实你的处理也没问题，只要单独封装，别丢给globalProperties应该就不报错了吧。