Angular7 中使用 svg sprite

原由

看到项目中不少svg，使用方法都是使用img标签引入。因而就想将svg合并，像字体图标那样方便使用。

解决方案

  在网上了解到能够将众多svg文件合并成一个，用symbol+id的方式区分不一样的svg图案，而后使用use 标签引用。

<svg>
    <use xlink:href="#id"></use>
 </svg>

  在 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

执行方式

  合并和导入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... 了解更多信息