SVG因其不失真的缩放比例和动态改变颜色的能力而被广泛用于Web开发。目前有两种常见的使用方式。1、网上有很多转换字体文件的网站，比如iconfont、iconmoon等，可以将选中的图标整合成一套字体文件，然后配合特定的标签+类名使用2、主要使用原理symbolreferences就是将所有要使用的svg文件代码整合成一个代码块，并指定每一个svg图片都有一个唯一的ID。使用时通过这个ID导入具体的svg图片。代码如下：svg>web端可以完美支持以上两种方式，但也存在问题1.无法按需引用字体文件，无法单独拆分。即使只使用其中一个图标，也需要导入所有字体文件，symbol供参考，需要手动删除不用的。例如，项目A使用50个svg图标，项目B使用其中的10个。如果要追求打包文件的大小，需要重新生成字体文件，或者重新设置引用的符号svg集合2.附加文件，如果字体中重复代码过多，会生成6个文件，并且symbol引用的重码太多，svg的格式是固定的，比如svg标签本身的代码就是重码，里面的version，xmlss属性都是一样的。对于包大小有限的项目，比如小程序，这些都是可以优化的地方。具体来说，applets或者uni-apps不支持svg标签，所以只能使用fonts。文件，但是字体文件存在以上问题，所以优化思路是：1.在小程序等不支持svg标签的环境下使用2.按需使用单个svg。svg库中可能有很多文件，但是每个项目你只能使用其中的一部分。3.减小SVG的大小并删除重复的标签。对于第一个问题，小程序虽然不支持svg标签，但是支持background-image和css的DATAUrls。支持如下代码。icon{background-image:url("data:image/svg+xml,...");}需要注意单双引号和特殊字符的编码，颜色字符的#一定要转成%23。的问题重复的svg标签可以通过动态填充代码来解决解决方案，在使用图标的时候，动态添加svg标签来满足上面的优化需求，写一个npm库，根据需要引用svg，减小svg的体积，支持uni-app，和普通vue项目的使用说明importVuefrom'vue'import'@xpf0000/vuesvgicon/dist/VueSvgIcons.css'importVueSvgIconsfrom'@xpf0000/vuesvgicon'Vue.component('Icons',VueSvgIcons)uni-app有一个umd文件引用有问题，直接引用源文件,使用注册机制,填写svg默认宽高和svg内部代码importIconfrom'@xpf0000/vuesvgicon'Icon.register({'text':{'width':300,'height':150,'raw':`我喜欢SVG我喜欢SVG/text>`}})使用图标
小程序，APP端使用，添加props:background-image="true"运行时，会使用css的background-image来显示NPM:https://www.npmjs.com/package/@xpf0000/vuesvgiconGIT:https://github.com/xpf0000/vuesvgicon欢迎大家star讨论
