SVG因其缩放不失真,可动态改变颜色等特点, 在web开发中得到了广泛的使用, 目前常见的使用方式有两种
1. 转换成字体文件
线上的网站很多, 像iconfont,iconmoon等, 可以把选定的图标整合成一套字体文件, 然后以特定的标签+类名进行使用
2. 使用symbol引用
主要原理就是把所有要用到的svg文件代码,整合到一个代码块内,并给定每个svg图片一个唯一ID, 使用时候通个这个ID引入具体的svg图片,代码如下:
<svg aria-hidden="true">
<use xlink:href="#ID"></use>
</svg>
以上两种方式, 在web端都可以完美支持, 但是也有问题
1.无法做到按需引用
字体文件无法单独拆分,就算只使用其中的一个图标,也需要引入全部的字体文件, symbol引用则需要手动把用不到的删除, 比如A项目用到50个svg图标, B项目用到其中的10个, 追求打包后文件大小的话, 就需要重新生成字体文件, 或者重设symbol引用的svg集合
2. 额外文件,重复代码太多
font的话,会生成6个文件,而symbol引用的重复代码太多, svg的格式是固定的, 像svg标签本身代码都属于重复代码,里面的version,xmlss属性都是完全一样的 对于包大小有限制的项目,比如小程序,这些都属于可优化的地方
具体到小程序或者uni-app这种,本身是不支持svg标签的, 所以只能使用字体文件, 但是字体文件又有以上的问题, 所以优化的思路就是:
1. 在小程序等不支持svg标签的环境下使用
2. 单个svg按需使用
svg库可能有很多个文件,但是每个项目可以只使用其中的某些
3. 缩减SVG体积, 去除重复标签
针对第一个问题, 虽然小程序不支持svg标签, 但是支持css的background-image和DATA Urls, 类似下面的代码是支持的
.icon{
background-image: url("data:image/svg+xml,<svg viewBox='0 0 1024 1024' fill='%23cc582c' version='1.1' xmlns='http://www.w3.org/2000/svg'>...</svg>");
}
需要注意单双引号和特殊字符的编码, 颜色字符的#就必须转换成%23
svg标签重复的问题, 可以通过代码动态填充来解决, 使用图标时候, 再动态添加svg标签
针对以上优化需求, 写了个npm库, 按需引用svg, 减小svg体积, 支持uni-app, 使用说明
针对普通vue项目
import Vue from 'vue'
import '@xpf0000/vuesvgicon/dist/VueSvgIcons.css'
import VueSvgIcons from '@xpf0000/vuesvgicon'
Vue.component('Icons', VueSvgIcons)
uni-app引用umd文件有问题, 直接引用源文件
import Vue from 'vue'
import VueSvgIcons from '@xpf0000/vuesvgicon/src/components/vue-svg-icons'
Vue.component('Icons', VueSvgIcons)
添加svg文件, 采用注册机制, 填写svg默认宽高和svg内部代码
import Icon from '@xpf0000/vuesvgicon'
Icon.register({
'text': {
'width': 300,
'height': 150,
'raw': `<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>`
}
})
使用图标
<template>
<div>
<Icons name="text"></Icons>
</div>
</template>
<script>
import './text.js'
export default {
data: function () {},
methods: {}
}
</script>
小程序,APP端使用, 添加props :background-image="true"
<Icons :background-image="true" name="text"></Icons>
运行时,会使用css的background-image进行展示
NPM: https://www.npmjs.com/package/@xpf0000/vuesvgicon
GIT: https://github.com/xpf0000/vuesvgicon
欢迎大家star&讨论
网友评论