react怎么使用icon

在React中优雅的使用icon

一个项目在开发中,经常需要用到小图标,怎么管理和维护它们呢?

建议每个项目都要有一个独立的图标库,这样可以按需引入图标,也方便了以后的维护。

图标库的所有者可以是UI设计师,他们在切图的时候,可以随便把图标上传到图标库。

在国内,推荐使用阿里巴巴图库来存放你的项目图标库 https://www.iconfont.cn

选择哪种类型的图标

图标有很多种,图片形式,unicode,font-class和symbol。

<!-- 图片形式-->
<img src='xxx.png' />
 <!-- unicode -->
<i class="iconfont">&#x33;</i>
 <!-- font-class-->
<i class="iconfont icon-xxx"></i>
<!-- symbol-->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

图片形式已经不推荐使用,缺点很多,比如难以维护,无法修改颜色,多次http请求等等。

unicode的最大缺点是语义化差,无法通过代码了解一个图标。

font-class其实是对unicode进行一层封装,把对unicode的使用隐藏在内部,通过className表现出来,所以它相对比unicode的优点是提高了可读性,font-class是业内常见的使用方式之一。

svg是越来越流行的一种图标使用方式,支持多色图标。由于是矢量图标,在任何分辨率下都可以不失真(font-class在低分辨率下会失真)。svg的缺点是渲染开销相对较高,不兼容ie8-(可能不是缺点),但这点缺点在优秀的表现面前,几乎可以被忽略。所以,未来是svg的。

怎么在React中优雅的使用svg呢

这种推荐一种方法,就是封装成组件,把svg的使用细节隐藏起来,通过暴露props.type的方式来使用svg icon。如下:

import React from 'react';
import classnames from 'classnames';
import propsTypes from 'prop-types';
import './SuperIcon.scss';
const scriptElem = document.createElement('script');
scriptElem.src = '//at.alicdn.com/t/font_1195834_vd9m25b5wje.js';
document.body.appendChild(scriptElem);
function SuperIcon({ className, type, ...restProps }) {
  return (
    <svg
      className={classnames('super-icon', className)}
      aria-hidden="true"
      {...restProps}
    >
      <use xlinkHref={`#${type}`} />
    </svg>
  );
}
SuperIcon.propsTypes = {
  type: propsTypes.string.isRequired,
  style: propsTypes.object,
};
export default SuperIcon;
.super-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor; 
    overflow: hidden;
  }

关于这段css的解释:

Q: 为什么super-icon没有定义font-size和color?

A: 因为font-size和color都是可以继承的css属性,它们的默认都会继承父级的属性值。

Q: 为什么width和height都为1em?

A: em是相对单位,与当前的font-size相等,这样可以让icon只会占用它所需的那部分位置。

Q: 为什么要写fill: currentColor?

A: 可以让对元素的color属性的定义也自动影响到fill属性。

使用方式:

<SuperIcon
     onClick={() => onSearch(this.value)}
     className="search-icon"
     type="dataasset-sousuo"
 />

为什么我对svg icon的颜色定义失效了

如果你碰到这个问题,你需要检查下你在阿里巴巴图库的图标是不是无色的,因为我们使用svg的方式是用元素,如果是有色图标,use下面的svg元素会自带fill属性,这样你则不能再次改变svg的颜色。

解决方法是:通过阿里巴巴图库的批量去色功能,去掉icon的颜色

更多相关技术文章,请访问HTML中文网

以上就是react怎么使用icon的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏