之前在用angular4写公司的一个在线小程序编辑器项目的时候,遇到了一些有意思的问题,其中有个就是图标的使用。
一开始采用的图标解决方案是使用字体图标(icomoon),这种方式在项目开发前期确实是一个很好的解决方案,把要使用的svg图标上传到icomoon上,下载打包好的字体包,在index.html中引用,之后只要用class控制就可以方便使用相应的icon,颜色和大小都是由css控制,确实很方便。然而随着项目越来越大,参与项目的开发者越来越多,这时候,在不同的开发者需要增改icon时,这个字体文件的修改就变得十分麻烦,我们项目组出现了不同开发者打包的字体图标冲突的问题,这时候需要大家手动对比冲突的图标,然后重新上传打包一份合并的字体文件,对应的所有开发者都要需要更新对应的冲突文件,这个问题虽然不是很难解决,但是却增加了沟通的成本,一旦出现冲突十分影响开发的体验,因此需要更换一个更为利于开发者协同工作的图标开发方案。
考虑到是由于打包引起的这个问题,于是干脆就砍掉这个打包的过程,采用angular组件的方式解决图标库的问题,我在项目中增加了一个icon的module,不多说,下面是代码
icon.module.ts代码
import { NgModule } from '@angular/core';