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