初次接触font-icon是使用font awesome库。font-icon比png 图标的优点是矢量(任意缩放也不失真),可通过css样式控制大小颜色,体积更小(可被缓存),使用Iconfont制作font-icon效率也大大提高。

使用Iconfont制作图标后导出的资源文件支持三种使用方式,分别是unicode,font-clss 和 symbol。各自的特点和使用步骤在示例中也有介绍详见demo。

促使我转向使用symbol方式的主要原因是web app开发中多色图标越来越多,原生app为追求简洁一般都避免使用多色图标,图标的颜色多体现app的主题色,web app 对这点要求并不严格;另外一个原因是只需要引入一份js文件,而font-class需要引入css文件和提供四种字体文件(svg,ttf,woff,eot).以下从两方面介绍symbol的使用:

  1. 制作svg sprite,这项工作是由设计师做的。symbol方式依据的是svg sprite技术,有一篇文章详细介绍了它的原理。但是实际上有更好的工具可以帮助生成,Iconfont就是一款在线工具,只需要导入svg图标就能导出字体资源文件,详细做法可参考帮助
  2. 使用 svg 图标。在html页面上的使用步骤见上面的demo,此外svg图标可以封装成一个react组件,在react应用中使用,步骤如下:
  • 在html页面(一般是index.html)上引入svg sprite的js文件,这个文件可放在cdn服务器上并设置缓存,可以加速加载。
    1
    <script src="./iconfont.js" ></script>
  • 封装react组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from 'react';
import PropTypes from 'prop-types';

const SvgIcon = ({
type, size, color, ...rest
}) => {
return (
<svg className="icon" style={{color:color,fontSize:size}} {...rest}>
<use xlinkHref={`#icon-${type}`} href={`#icon-${type}`} />
</svg>
);
};
SvgIcon.defaultProps = {
size: null,
color: null,
};
SvgIcon.propTypes = {
type: PropTypes.string.isRequired,
size: PropTypes.number,
color: PropTypes.string,
};
export default SvgIcon;

样式:
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
使用:
<SvgIcon type="shouji" color="red" size={40} />