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

595

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

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

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

阿里字库操作步骤如下:

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

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

2.png

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

4.png

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

6.png 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>

image.png 可设置字体样式和hover样式:

image.png

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>

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

image.png

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!