的原因是看到项目中有很多svg，使用方法是使用img标签导入。所以想合并svg，和字体图标一样好用。解决方法在网上了解到可以将多个svg文件合并为一个，通过symbol+id区分不同的svg模式，然后使用use标签进行引用。在https://icomoon.io/app/#/select上合成了几个图标，测试了一下，可以用，大家也可以通过svg标签中的填充样式改变svg的颜色。查了一下兼容性：https://developer.mozilla.org...基本功能的兼容性没问题，但是URI引用的功能不兼容IE。也就是说，要想兼容ie，就必须在工程文件中对合成svg文件的内容进行编码（可复用）。改进：使用该方法手动合成svg肯定不行。可以使用nodejs脚本或者webpack自动合成svg，然后导入到项目的index.html文件中。可以将svg和use标签打包成一个组件，方便使用。合并svg的实现方法合并导入svg放在项目的编译过程中。由于项目使用的angular框架，封装了angular的编译配置。在angular6版本中，ngejec命令被废弃，不再支持自定义webpack，angular.json中的配置不提供自定义webpack，也不执行外部nodejs脚本。就在我准备放弃自定义webpack配置，使用单独的nodejs脚本合并svg的时候，在谷歌上搜索了ngx-build-plus这个ng-cli插件。安装此包后，在使用ngbuild或ngserve时，使用--extra-webpack-config参数指定一个webpack配置文件。你可以去https://github.com/manfredste...查看如何使用它和说明。merge方法去github找了几个svgspriteloader和插件，要么不符合要求，要么不适合angular。我想要的是将指定目录下的svg图标合并成一个文件，然后将内容导入到编译好的index.html中。类似于svg-sprite-loader，这个是检测导入到js中的svg进行合并，在angular中不起作用。svg-sprite-html-webpack插件可以满足要求，但是需要依赖html-webpack-plugin插件，会影响angular-cli本身的配置。如果使用这个插件，会改变最终的index.htmllike--baseHref内容的编译参数不能使用。最后决定自己实现一个svg合并导出的插件。写个插件，在github上找svg-sprite库合并svg。webpackemit时，重写compilation.assets['index.html']的source和size方法，将合并后的内容导入到index.html中。实现代码：https://github.com/llycc/svg-...注意在安装ngx-build-plus时，使用ngaddngx-build-plus命令，会帮你修改angular.json中的编译选项，否则需要在angular.json中手动修改builder和servebuilder。具体可以参考本项目的angular.json文件。你可以去https://github.com/manfredste...了解更多信息
