vue项目优化之svg转为字体图标，减少请求数量

当项目中大量使用定制的svg时，从优化的角度来说打包时压缩svg文件并不能达到多大的效果，因为请求数并没有减少。同时，最近发现项目中svg文件请求时间较长，再加上同时请求多个svg文件，导致页面渲染时间拉长，使用体验很不好，所以对于svg文件的优化迫在眉睫。

目前我能想到的优化方式是将svg文件转为字体图标，减少请求同数量，同时还能满足项目多种使用场景。

svg转为字体图标可使用阿里字库或者icomoon，本文以阿里字库作为示例。

阿里字库操作步骤如下：

1、登录阿里字库，点击到我的项目。

2、创建项目，填写项目信息，字体格式按照自己的需求进行选择。

3、上传svg文件，并选择上面创建的项目，进行转化。

4、下载转换之后的文件至本地。

5、在项目中引用生成好的字体图标。

将上面下载好的文件复制到项目中，示例中是放在static目录下的，在main.js中按需求进行引用。 a、使用Unicode的方式引入

//main.js中引入iconfont.css文件
import "../static/font/iconfont.css"

<div>使用Unicode的方式</div>
<span class="iconfont iconfont--unicode">&#xe604;</span>

可设置字体样式和hover样式:

b、使用Font Class的方式

//main.js中引入iconfont.css文件
import "../static/font/iconfont.css"

<!-- 使用Font Class的方式 -->
<div>使用Font Class的方式</div>
<span class="iconfont halo-icon-biaoqian iconfont--font-class"></span>
<!-- Before伪元素+ iconfont的Class类名 -->
<div>Before伪元素+ iconfont的Class类名</div>
<span class="iconfont iconfont--before-content"></span>
<!-- Before伪元素需要单独设置font-family 举例：可用于修改select下拉箭头，使用公司自己设计的svg图标-->
<div>Before伪元素需要单独设置font-family。使用场景举例：可用于修改select下拉箭头，使用公司自己设计的svg图标</div>
<span class="iconfont--before-content-expand"></span>

此方式也可设置字体样式和hover样式

c、 Symbol 引用

//main.js中引入iconfont.js文件
import "../static/font/iconfont.js"

 <div>Symbol 引用</div>
 <svg class="icon icon--symbol" aria-hidden="true">
    <use xlink:href="#halo-icon-jiance"></use>
 </svg>
 <style>
 .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
 }
 </style>

此方式可设置font-size(在.icon中设置)，颜色(通过#halo-icon-jiance path设置fill实现)，但是hover效果本人尚未实现，尝试可很多种方式都不行

6、字体图标文件如下图建议只保留iconfont.css、iconfont.woff（兼容更多的低版本设备）、iconfont.woff2（偏向移动端）即可，并对font-face做相应修改

微信图片_20220205173054.png

7、示例的代码

<template>
  <div class="hello">
    <!-- 使用Unicode的方式 -->
    <div>使用Unicode的方式</div>
    <span class="iconfont iconfont--unicode">&#xe604;</span>
    <!-- 使用Font Class的方式 -->
    <div>使用Font Class的方式</div>
    <span class="iconfont halo-icon-biaoqian iconfont--font-class"></span>
    <!-- Before伪元素+ iconfont的Class类名 -->
    <div>Before伪元素+ iconfont的Class类名</div>
    <span class="iconfont iconfont--before-content"></span>
    <!-- Before伪元素需要单独设置font-family 举例：可用于修改select下拉箭头，使用公司自己设计的svg图标-->
    <div>Before伪元素需要单独设置font-family。使用场景举例：可用于修改select下拉箭头，使用公司自己设计的svg图标</div>
    <span class="iconfont--before-content-expand"></span>

    <!-- Symbol 引用 -->
    <div>Symbol 引用</div>
    <svg class="icon icon--symbol" aria-hidden="true">
      <use xlink:href="#halo-icon-jiance"></use>
    </svg>
    <svg class="icon icon--symbol" aria-hidden="true">
      <use xlink:href="#halo-icon-ruzhu"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      
    }
  },
  methods: {
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.iconfont--content {
  /* font-size: 16px; */
}
.iconfont--unicode:hover {
  color: green;
}

.iconfont--font-class:hover {
  color: green;
}

.iconfont--before-content:before {
  content: "\e606";
}
.iconfont--before-content:hover:before {
  color: green;
}

.iconfont--before-content-expand:before {
  content: "\e607";
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
}
.iconfont--before-content-expand:hover::before {
  color: green;
}
.iconfont--before-content-expand:active::before {
  color: blue;
}
</style>

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#halo-icon-jiance {
  font-size: 100px!important;
  font-size: 100px;
}
#halo-icon-jiance path {
  fill: red; 
}
#halo-icon-jiance:hover path {
  fill: green!important; 
}
</style>

Time！