【Angular4】如何给自己的Angular项目写一个好用的方便管理的SVG图标库

之前在用angular4写公司的一个在线小程序编辑器项目的时候，遇到了一些有意思的问题，其中有个就是图标的使用。

一开始采用的图标解决方案是使用字体图标（icomoon），这种方式在项目开发前期确实是一个很好的解决方案，把要使用的svg图标上传到icomoon上,下载打包好的字体包，在index.html中引用，之后只要用class控制就可以方便使用相应的icon，颜色和大小都是由css控制，确实很方便。然而随着项目越来越大，参与项目的开发者越来越多，这时候，在不同的开发者需要增改icon时，这个字体文件的修改就变得十分麻烦，我们项目组出现了不同开发者打包的字体图标冲突的问题，这时候需要大家手动对比冲突的图标，然后重新上传打包一份合并的字体文件，对应的所有开发者都要需要更新对应的冲突文件，这个问题虽然不是很难解决，但是却增加了沟通的成本，一旦出现冲突十分影响开发的体验，因此需要更换一个更为利于开发者协同工作的图标开发方案。

考虑到是由于打包引起的这个问题，于是干脆就砍掉这个打包的过程，采用angular组件的方式解决图标库的问题，我在项目中增加了一个icon的module，不多说，下面是代码

icon.module.ts代码

import { NgModule }           from '@angular/core';