初次接触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技术，有一篇文章详细介绍了它的。但是实际上有更好的工具可以帮助生成，就是一款在线工具，只需要导入svg图标就能导出字体资源文件，详细做法可参考。
2. 使用 svg 图标。在html页面上的使用步骤见上面的demo，此外svg图标可以封装成一个react组件，在react应用中使用，步骤如下：

• 在html页面（一般是index.html）上引入svg sprite的js文件，这个文件可放在cdn服务器上并设置缓存，可以加速加载。

复制代码

• 封装react组件

import React from 'react';import PropTypes from 'prop-types';const SvgIcon = ({  type, size, color, ...rest}) => {  return (    
    
         
      );};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;}使用：
    复制代码