线上的网站很多,像iconfont,iconmoon等,可以把选定的图标整合成一套字体文件,然后以特定的标签+类名进行使用
主要原理就是把所有要用到的svg文件代码,整合到一个代码块内,并给定每个svg图片一个唯一ID,使用时候通个这个ID引入具体的svg图片,代码如下:
字体文件无法单独拆分,就算只使用其中的一个图标,也需要引入全部的字体文件,symbol引用则需要手动把用不到的删除,比如A项目用到50个svg图标,B项目用到其中的10个,追求打包后文件大小的话,就需要重新生成字体文件,或者重设symbol引用的svg集合
font的话,会生成6个文件,而symbol引用的重复代码太多,svg的格式是固定的,像svg标签本身代码都属于重复代码,里面的version,xmlss属性都是完全一样的对于包大小有限制的项目,比如小程序,这些都属于可优化的地方
具体到小程序或者uni-app这种,本身是不支持svg标签的,所以只能使用字体文件,但是字体文件又有以上的问题,所以优化的思路就是:
svg库可能有很多个文件,但是每个项目可以只使用其中的某些
针对第一个问题,虽然小程序不支持svg标签,但是支持css的background-image和DATAUrls,类似下面的代码是支持的
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文件有问题,直接引用源文件
importVuefrom'vue'importVueSvgIconsfrom'@xpf0000/vuesvgicon/src/components/vue-svg-icons'Vue.component('Icons',VueSvgIcons)添加svg文件,采用注册机制,填写svg默认宽高和svg内部代码