ant-desing-vue升级后Icon的动态调用及自建icon库的方法

1.X版本使用方式

<icon :type="item.icon" />

但在3.x版本中，放弃该方式的引用，使用时必须先引用并生命对应的图标组件，简单静态使用还可以，如果想动态实现应该如何做呢，马上贴出代码

首先我们要自己创建个组件(/components/Icon/index.js)

文件内容很简单如下：

// /components/Icon/index.js
import * as Icons from '@ant-design/icons-vue'
import { createVNode } from 'vue'
const Icon = function (props) {
  const { type } = props
  return createVNode(Icons[type])
};
export { Icon }

接下里就可以直接在你的vue文件中引用了

import { Icon } from '../../components/Icon'
...
components: {
Icon,
...

<icon type="PlusOutlined" />
<icon :type="{item.icon}" />