之前在用angular4寫公司的一個線上小程式編輯器專案的時候，遇到了一些有意思的問題，其中有個就是圖示的使用。

一開始採用的圖示解決方案是使用字型圖示（icomoon），這種方式在專案開發前期確實是一個很好的解決方案，把要使用的svg圖示上傳到icomoon上,下載打包好的字型包，在index.html中引用，之後只要用class控制就可以方便使用相應的icon，顏色和大小都是由css控制，確實很方便。然而隨著專案越來越大，參與專案的開發者越來越多，這時候，在不同的開發者需要增改icon時，這個字型檔案的修改就變得十分麻煩，我們專案組出現了不同開發者打包的字型圖示衝突的問題，這時候需要大家手動對比衝突的圖示，然後重新上傳打包一份合併的字型檔案，對應的所有開發者都要需要更新對應的衝突檔案，這個問題雖然不是很難解決，但是卻增加了溝通的成本，一旦出現衝突十分影響開發的體驗，因此需要更換一個更為利於開發者協同工作的圖示開發方案。

考慮到是由於打包引起的這個問題，於是乾脆就砍掉這個打包的過程，採用angular元件的方式解決圖示庫的問題，我在專案中增加了一個icon的module，不多說，下面是程式碼

icon.module.ts程式碼

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

import { MyIcon } from './myIcon.component';

@NgModule({
  imports: [CommonModule],
  declarations
 
: [MyIcon],
  exports: [MyIcon]
})
export class IconModule {

}

定義好icon的module檔案後，開始為每個要顯示的icon寫對應的元件，這裡以MyIcon元件為例：

myIcon.component.ts程式碼

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-icon',
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 
 version="1.1" id="my-icon" [attr.x]="x" [attr.y]="y" [attr.width]="size" [attr.height]="size" [attr.fill]="color" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><path style="fill-rule:evenodd;clip-rule:evenodd;" d="M8,6C6.343,6,5,7.343,5,9s1.343,3,3,3c1.657,0,3-1.343,3-3S9.657,6,8,6z     M8,10c-0.552,0-1-0.448-1-1s0.448-1,1-1c0.552,0,1,0.448,1,1S8.552,10,8,10z M14,2h-2c0-1.105-0.895-2-2-2H6C4.895,0,4,0.895,4,2    H2C0.895,2,0,2.895,0,4v10c0,1.105,0.895,2,2,2h12c1.105,0,2-0.895,2-2V4C16,2.895,15.105,2,14,2z M14,13c0,0.552-0.448,1-1,1H3    c-0.552,0-1-0.448-1-1V5c0-0.552,0.448-1,1-1h3V3c0-0.552,0.448-1,1-1h2c0.552,0,1,0.448,1,1v1h3c0.552,0,1,0.448,1,1V13z"/>
</svg>
  `,
  styles: [`
    #my-icon{
        margin:0 auto;
        display:inline-block;
        vertical-align:middle;
    }
  `]
})
export class MyIcon {
  @Input() size: number = 20;
  @Input() color: string = '#000000';
  @Input() x: number = 0;
  @Input() y: string = 0;
}

使用時直接在根模組app.module.ts中import我們寫好的IconModule，然後就可以在整個專案任意地方使用icon了
使用示例:

<my-icon [size]="18" [color]="'#dcdcdc'" [x]="10" [y]="10"></my-icon>

說明

1、template中的svg的屬性不能使用{{}}這種方式傳值，這是一個坑點，使用這種方式傳值會報錯，需要使用[attr.width]="size"這種方式傳值；
2、一般拿到的svg圖示都是無法直接使用的，需要根據專案需求寫一些初始化樣式的css程式碼；
3、需要增加圖示時只要增加一個圖示的元件同時宣告在圖示module中就好了。

總結

1、使用Angular元件式圖示的優勢：
方便多人協同開發時的增改圖示，使用的時候也更加方便和直觀，更易於閱讀；
能夠實現多個圖示的組合使用，靈活性更高；
打包時不需要考慮字型包的上傳，操作更加簡單，有利於提高開發效率；
不會出現在尺寸設定較小時，字型圖示會出現的字型模糊的現象。
2、使用Angular元件式圖示的劣勢：
需要寫更多程式碼，增加測試的工作量，需要開發者懂得SVG相關的知識。