react结合iconfont制作icon组件

丰富多彩的小图标点缀，装饰了我们的应用程序，成为我们应用程序中必不可少的一部分。

Iconfont——阿里巴巴矢量图标库，是阿里巴巴UED团队(花名： 阿里妈妈MUX)打造的矢量图标管理平台。

通过这个免费的工具，设计师不仅可以浏览下载(不可商用)大量优秀设计师的图标作品，还可以管理和展示自己设计的图标。是很多UI设计师日常工作的必备工具。

首先在iconfont上找到你想要的图标，收藏进购物车，然后添加至你的项目中，接着在项目中复制链接到你react中的入口文件中，如图所示：

然后全局写入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(
	    
	  )
	}
}

const defaultProps = {
	fontSize: '25px',
	color:undefined,
	type: 'not-find'
};

const propTypes = {
	type: PropTypes.string.isRequired,
};

Icon.defaultProps = defaultProps;
Icon.propTypes = propTypes;

export default Icon;

当然这个组件写得并不完美，有需求的可自行修改完善。