antdesign是最常使用的ui设计语言，那么如何在react框架中动态使用antdesign的图标效果呢？

在前端开发中对于动态图标的使用常见于菜单模块，通过动态给用户配置权限可以极大的限制用户误操作及功能的管理。

对于菜单模块的使用，简易明了的图标也是重要的一步，那么在react中可以如何动态配置antdesign的图标呢？

本篇文章就来介绍在react中如何使用antdesign设计语言来动态配置图标效果。

一、安装和引入所有icons

    1.1、安装@ant-design/icons

//npm方式
npm install @ant-design/icons --save
//yarn方式
yarn add @ant-design/icons

    1.2、引入所有ant-design的图标效果

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

二、创建动态图标使用方法及使用

    2.1、创建iconToElement动态图标方法

const iconToElement = (name: string) => React.createElement(Icon && (Icon as any)[name], {
  style: { fontSize: '17px' }
})

    2.2、调用iconToElement方法并实现StepBackwardOutlined图标效果的展示

iconToElement('StepBackwardOutlined')

通过上述流程即可实现在react中实现ant-design动态图标的展现效果。