原由

看到项目中许多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… 相识更多信息