前言

图标的使用越来越多，开始简单的项目图标都是以图片形式png，jpg为主，但图片加载受图片大小和网络影响还是会有点慢，为了优化、减少请求，出现了svg图标的使用方式——unicode引用（了解阿某图标库iconfront使用）

• 两种格式取长补短，各取所需

SVG优势：

1. SVG是矢量图文件（XML 编写），可以使用gzip的方法把文件压缩到很小，所有的SVG可以全部放在一个文件中，节省HTTP请求；
2. 可以随意改变大小，同时不影响图标质量/像素；
3. 可以使用css样式自定义图标颜色，尺寸等；
4. 使用SML.CSS或者js可以制作有交互动画的效果；

PNG优势：

1. PNG是位图，基于像素可以处理多种颜色高分辨率等任何复杂的非动画图像；
2. 制作简单，兼容性高

• 设计一个svg过程（传送）

使用iconmoon（官网）

一个svg图标打包工具，把svg打包成fonts文件，通过unicode方式引入到代码里，具体流程如下：

1. 创建图标集合：菜单 > new empty set
2. 将svg图片拖拽到文件内，选择要创建成fonts的icon > generate font
3. 下载解压（6个文件，主要是fonts和style.css文件）
   
4. 将fonts存到项目的静态文件中，我这里是放到assets里
5. 配置icon样式文件（fonts路径和依赖class）

将style.css内容复制到指定样式文件中，我这里放到assets>style>base.scss里，其中：
（1）@font-face声明创建自定义字体’icomoon‘，遇到加载不出来问题主要检查src的路径是否可以访问到fonts文件；
（2）[class ^= ‘unimap-icon’]属性选择器，这里表示class以unimap-icon开头的选择器都应用该字体样式。

//base.scss
@font-face {
    
    
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot');
    src: url('../fonts/icomoon.eot#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class ^= 'unimap-icon'], [class *= ' unimap-icon'] {
    
    
    font-family: 'icomoon' !important; /* use !important to prevent issues with browser extensions that change fonts */
    // speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-add::before {
    
    
  content: "\e902";
}

.icon-checkstand::before {
    
    
  content: "\e903";
}

.icon-close1::before {
    
    
  content: "\e904";
}

6. 页面里通过i标签渲染，补全class就可以应用上字体图标样式

<i class="unimap-icon _icon-add" style={ 
        { 
         color, fontSize: 12px, }} />

补充：小程序使用iconfont