svg图标使用心得

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

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

• unicode
• font-class
• symbol

促使我转向使用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服务器上并设置缓存，可以加速加载。

<script src="./iconfont.js" ></script>
复制代码

• 封装react组件

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} />

复制代码

转载于:https://juejin.im/post/5bae1b2fe51d450e735e7aff