首页手记 react结合iconfont制作icon组件

react结合iconfont制作icon组件

标签：

JavaScript React.JS React

1. 前言

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

2. 关于阿里iconfont

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

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

3. 写react icon组件

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

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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;

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

点击查看更多内容