当项目中大量使用定制的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"></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做相应修改
7、示例的代码
<template>
<div class="hello">
<!-- 使用Unicode的方式 -->
<div>使用Unicode的方式</div>
<span class="iconfont iconfont--unicode"></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!