1. 前言
丰富多彩的小图标点缀，装饰了我们的应用程序，成为我们应用程序中必不可少的一部分。
2. 关于阿里iconfont
Iconfont——阿里巴巴矢量图标库，是阿里巴巴UED团队(花名： 阿里妈妈MUX)打造的矢量图标管理平台。
通过这个免费的工具，设计师不仅可以浏览下载(不可商用)大量优秀设计师的图标作品，还可以管理和展示自己设计的图标。是很多UI设计师日常工作的必备工具。
3. 写react icon组件
首先在iconfont上找到你想要的图标，收藏进购物车，然后添加至你的项目中，接着在项目中复制链接到你react中的入口文件<head></head>中，如图所示：
<script src="https://at.alicdn.com/t/font_631344_31ido9xrjns.js"></script>
然后全局写入css样式
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
接着写react icon组件如下：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Icon extends Component {
state = {
}
render () {
const { type,fontSize,color,margin } = this.props
const styleObj = {
fontSize: fontSize,
color: color,
margin: margin,
verticalAlign: 'middle'
}
return(
<svg className="icon" aria-hidden="true" style={styleObj}>
<use xlinkHref={`#icon-${type}`}></use>
</svg>
)
}
}
const defaultProps = {
fontSize: '25px',
color:undefined,
type: 'not-find'
};
const propTypes = {
type: PropTypes.string.isRequired,
};
Icon.defaultProps = defaultProps;
Icon.propTypes = propTypes;
export default Icon;
当然这个组件写得并不完美，有需求的可自行修改完善。