antd4 动态创建icon图标

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

前言

公司准备用 react 技术栈做项目,所以最近一直抽空在学习react相关知识。 大致学习了下基本知识，发现相比 VUE 来说，我好像更加喜欢react 了 ，对于我个人来说，写起来逻辑思维比较多，更多的是使用原生 JS的语法知识，VUE的话更多的是在乎数据怎么来。对于我们开发人员来说，框架是一种快速实现需求的手段，我个人认为，基础知识太重要了，身边有很多人使用了一些框架后，js写一个简单的功能都不知道怎么写的了（当然也是包括我），所以我觉得有空闲时间还是可以多看看基础。

我现在正在使用 react + antd 来做管理系统，刚用antd 时有些难受，感觉没有 Element 轻量，好用。但是随着熟悉起来了，感觉也还行，挺好用的。但是中间遇到过一些问题，其中就包括我这篇文章的主题： Icon

需求

因为我的需求是：左侧菜单根据权限来显示，所以必然是动态显示左侧菜单了，其实在我们开发中这种需求是很常见的，我们一般都是要动态配置菜单项。以前公司做项目的时候是通过配置页面让用户去选择，然后再将配置项存到数据库中。现在的需求暂时不用配置页面，那么我就想着直接用配置文件来存储菜单项。

刚开始没想好怎么动态创建icon 然后找了文档和一些博客看了下，终于解决了这个问题。

具体思路：从配置文件中配置图标组件，然后在获取数据时动态创建Icon组件

具体实现

这是在我的配置文件中动态配置了我的左侧菜单如下：

const menuList = [
	{
		title: '首页',
		icon: 'HomeOutlined',
		key: '/home',
	}
]

这是创建Icon 的代码块

	  // antd4中动态创建icon
      const icon = React.createElement(
        Icon[item.icon],
        {
          style:{ fontSize: '16px'}
        }
      )

这里需要注意下，如果你的antd 是 4.0及以上的版本，那么导入的Icon 不再是从 antd 中导入了，而是从 @ant-design/icons中导入，因为官网明确说明，从4.0开始，antd 不在内置 Icon 组件，需要使用独立的 @ant-design/icons 包。 如果你用 4.0版本，然后从 antd 中导入 Icon 是没有效果的 具体导入代码如下：

import * as Icon from '@ant-design/icons';

上面是动态获取菜单及图标的一种方式，如果不需要动态获取，只是想要固定的图标，那么就稍微简单很多了。 只需要找到引入你需要的的图标组件，然后在需要的地方加上 icon 属性即可，例如：

import { PlusOutlined} from '@ant-design/icons'

<Button type='primary' icon={<PlusOutlined/>}>

以上就是我最近使用 react + antd 时遇到的图标问题的解决方案，如果有说的不对的地方，还请大家多指教，另外如果大家有更好的方式，欢迎分享~