摘要：起因看到项目中很多，使用方法都是使用标签引入。解决方案在网上了解到可以将众多文件合并成一个，用的方式区分不同的图案，然后使用标签引用。在版本废弃了命令，不再支持自定义，而中的未提供自定义或是执行外挂脚本的配置。
起因
看到项目中很多svg，使用方法都是使用img标签引入。于是就想将svg合并，像字体图标那样方便使用。
解决方案在网上了解到可以将众多svg文件合并成一个，用symbol+id的方式区分不同的svg图案，然后使用use 标签引用。
在 https://icomoon.io/app/#/select shang合成了几个图标，测试了下，果然可以，还可以在svg标签通过fill样式改变svg的颜色。
去看了下兼容性：https://developer.mozilla.org...
基础功能的兼容性没问题，但是通过URI引用的功能不兼容IE。也就是说，要想兼容ie，就必须要把合成的svg文件的内容编码在项目文件中（可复用）。
改进：使用方式手动合成svg的方式肯定是不行的，可以使用nodejs脚本或是webpack去自动合成svg，然后导入项目的index.html文件中。svg和use标签可以封装成一个组件，便于使用。
合并和导入svg放在项目的编译过程中去，由于项目使用的angular框架，而angular的编译配置是封装好的。在angular6 版本废弃了ng ejec命令，不再支持自定义webpack，而angular.json中的未提供自定义webpack或是执行外挂nodejs脚本的配置。
就在快要放弃自定义webpack配置，转而使用多带带的nodejs脚本去合并svg的时候，在google上搜索到了ngx-build-plus这个ng-cli的插件。安装上这个包后，ng build或是ng serve的时候，使用 --extra-webpack-config参数可以指定一个webpack配置文件，可以去https://github.com/manfredste... 看下具体使用方法和说明。
去github上找了几种svg sprite的loader和plugin，要么是不满足要求，要么是不适合angular。我想要的是把指定目录下的svg图标合并成一个文件，然后再将内容导入到编译出的index.html中。类似svg-sprite-loader这种是检测import到js中的svg进行合并，在angular中行不通。svg-sprite-html-webpack插件倒是符合要求，但是它需要依赖html-webpack-plugin插件，这样会影响angular-cli自身的配置，如果使用了这个插件，类似--baseHref这样改变最终index.html的内容的编译参数就无法使用了。
最后决定自己实现一个插件，用来合并导出svg。
在github上找到svg-sprite库，用来合并svg。在webpack emit的时候通过重写compilation.assets["index.html"]的source和size方法将合并的内容导入index.html中。实现代码：https://github.com/llycc/svg-...
注意事项安装ngx-build-plus时要使用ng add ngx-build-plus命令,这样做ng会帮你修改angular.json中编译选项，否则需要手动修改angular.json中build和serve的builder，具体可参考本项目angular.json文件。可以去https://github.com/manfredste... 了解更多信息
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109762.html
摘要：它是基于，由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道，那么元素是什么呢单纯翻译的话，是符号的意思，然我的理解是元素用来定义一个图形模板对象，它可以用一个元素实例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 大家好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，...
摘要：关于浏览器图标解决方案，一直就有很多以及相对而言矢量图标以及支持浏览器自身解析的优点，很多团队都已经在使用了。这篇文章主要说明图标的使用和制作。在中可以在任何地方复用文件中定定义的的形，包括和已经。 showImg(https://segmentfault.com/img/bVvef3); 关于浏览器图标解决方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...
摘要：关于浏览器图标解决方案，一直就有很多以及相对而言矢量图标以及支持浏览器自身解析的优点，很多团队都已经在使用了。这篇文章主要说明图标的使用和制作。在中可以在任何地方复用文件中定定义的的形，包括和已经。 showImg(https://segmentfault.com/img/bVvef3); 关于浏览器图标解决方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...
摘要：结论绿色部分表示比略胜一筹的地方，黄色部分表示有所欠缺的地方，灰绿色表示差不多。兼容性列表可以良好地支持多色及多色变化。以为例说明便捷使用。综上结论选择或许是一个不错地选择去替代的使用方式。 这可能是个别人写过很多次的话题，但貌似由于兼容性的原因？图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式？希望通过自己新瓶装旧酒的方式能重新引导一下问题。 SVG vs I...
阅读 545·2021-09-24 09:48
阅读 2463·2021-08-26 14:14
阅读 494·2019-08-30 13:08
阅读 1401·2019-08-29 15:22
阅读 2962·2019-08-29 11:06
阅读 971·2019-08-26 18:26
阅读 949·2019-08-26 13:53
阅读 2431·2019-08-26 12:21
