小程序, uni-app等不支持svg标签的情况下,svg图标解决方案

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&讨论