charts引入icon图片_如何在React中优雅的使用icon

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

建议每个项目都要有一个独立的图标库，这样可以按需引入图标，也方便了以后的维护。
图标库的所有者可以是UI设计师，他们在切图的时候，可以随便把图标上传到图标库。
在国内，可以使用阿里图库来存放你的项目图标库 https://www.iconfont.cn

选择哪种类型的图标

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

<!-- 图片形式-->
<img src='xxx.png' /><!-- unicode -->
<i class="iconfont">3</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支持多色图标，且是矢量图标，在任何分辨率下都可以不失真。svg的缺点是渲染开销会相对高一点点，但这点小缺点在优秀的表现面前，几乎可以被忽略。所以，推荐使用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 (<svgclassName={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属性。

使用方式：

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

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

如果你碰到这个问题，那么你的svg大概率是带了一些行内样式。比如fill: xxxx。

解决方法是：手动删掉svg元素的行内样式，或者通过阿里巴巴图库的批量去色功能，去掉icon的颜色。