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... 了解更多信息

相关推荐