react怎么使用icon

在React中优雅的使用icon

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

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

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

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

选择哪种类型的图标

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

<!-- 图片形式-->
<img src='xxx.webp' />
 <!-- 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的详细内容，更多请关注易知道|edz.cc其它相关文章！