为了账号安全,请及时绑定邮箱和手机立即绑定

react结合iconfont制作icon组件

1. 前言

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

2. 关于阿里iconfont

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

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

3. 写react icon组件

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

<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;

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

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消