資訊專欄INFORMATION COLUMN
摘要：起因看到項(xiàng)目中很多，使用方法都是使用標(biāo)簽引入。解決方案在網(wǎng)上了解到可以將眾多文件合并成一個(gè)，用的方式區(qū)分不同的圖案，然后使用標(biāo)簽引用。在版本廢棄了命令，不再支持自定義，而中的未提供自定義或是執(zhí)行外掛腳本的配置。
起因
看到項(xiàng)目中很多svg，使用方法都是使用img標(biāo)簽引入。于是就想將svg合并，像字體圖標(biāo)那樣方便使用。
解決方案??在網(wǎng)上了解到可以將眾多svg文件合并成一個(gè)，用symbol+id的方式區(qū)分不同的svg圖案，然后使用use 標(biāo)簽引用。
??在 https://icomoon.io/app/#/select shang合成了幾個(gè)圖標(biāo)，測(cè)試了下，果然可以，還可以在svg標(biāo)簽通過fill樣式改變svg的顏色。
??去看了下兼容性：https://developer.mozilla.org...
基礎(chǔ)功能的兼容性沒問題，但是通過URI引用的功能不兼容IE。也就是說，要想兼容ie，就必須要把合成的svg文件的內(nèi)容編碼在項(xiàng)目文件中（可復(fù)用）。
??改進(jìn)：使用方式手動(dòng)合成svg的方式肯定是不行的，可以使用nodejs腳本或是webpack去自動(dòng)合成svg，然后導(dǎo)入項(xiàng)目的index.html文件中。svg和use標(biāo)簽可以封裝成一個(gè)組件，便于使用。
??合并和導(dǎo)入svg放在項(xiàng)目的編譯過程中去，由于項(xiàng)目使用的angular框架，而angular的編譯配置是封裝好的。在angular6 版本廢棄了ng ejec命令，不再支持自定義webpack，而angular.json中的未提供自定義webpack或是執(zhí)行外掛nodejs腳本的配置。
??就在快要放棄自定義webpack配置，轉(zhuǎn)而使用多帶帶的nodejs腳本去合并svg的時(shí)候，在google上搜索到了ngx-build-plus這個(gè)ng-cli的插件。安裝上這個(gè)包后，ng build或是ng serve的時(shí)候，使用 --extra-webpack-config參數(shù)可以指定一個(gè)webpack配置文件，可以去https://github.com/manfredste... 看下具體使用方法和說明。
去github上找了幾種svg sprite的loader和plugin，要么是不滿足要求，要么是不適合angular。我想要的是把指定目錄下的svg圖標(biāo)合并成一個(gè)文件，然后再將內(nèi)容導(dǎo)入到編譯出的index.html中。類似svg-sprite-loader這種是檢測(cè)import到j(luò)s中的svg進(jìn)行合并，在angular中行不通。svg-sprite-html-webpack插件倒是符合要求，但是它需要依賴html-webpack-plugin插件，這樣會(huì)影響angular-cli自身的配置，如果使用了這個(gè)插件，類似--baseHref這樣改變最終index.html的內(nèi)容的編譯參數(shù)就無法使用了。
最后決定自己實(shí)現(xiàn)一個(gè)插件，用來合并導(dǎo)出svg。
在github上找到svg-sprite庫，用來合并svg。在webpack emit的時(shí)候通過重寫compilation.assets["index.html"]的source和size方法將合并的內(nèi)容導(dǎo)入index.html中。實(shí)現(xiàn)代碼：https://github.com/llycc/svg-...
注意事項(xiàng)安裝ngx-build-plus時(shí)要使用ng add ngx-build-plus命令,這樣做ng會(huì)幫你修改angular.json中編譯選項(xiàng)，否則需要手動(dòng)修改angular.json中build和serve的builder，具體可參考本項(xiàng)目angular.json文件?？梢匀ttps://github.com/manfredste... 了解更多信息
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109762.html
摘要：它是基于，由聯(lián)盟進(jìn)行開發(fā)的。是一種采用來描述二維圖形的語言這個(gè)大家都知道，那么元素是什么呢單純翻譯的話，是符號(hào)的意思，然我的理解是元素用來定義一個(gè)圖形模板對(duì)象，它可以用一個(gè)元素實(shí)例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 大家好，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官——蘇南(South·Su)，...
摘要：關(guān)于瀏覽器圖標(biāo)解決方案，一直就有很多以及相對(duì)而言矢量圖標(biāo)以及支持瀏覽器自身解析的優(yōu)點(diǎn)，很多團(tuán)隊(duì)都已經(jīng)在使用了。這篇文章主要說明圖標(biāo)的使用和制作。在中可以在任何地方復(fù)用文件中定定義的的形，包括和已經(jīng)。 showImg(https://segmentfault.com/img/bVvef3); 關(guān)于瀏覽器圖標(biāo)解決方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...
摘要：關(guān)于瀏覽器圖標(biāo)解決方案，一直就有很多以及相對(duì)而言矢量圖標(biāo)以及支持瀏覽器自身解析的優(yōu)點(diǎn)，很多團(tuán)隊(duì)都已經(jīng)在使用了。這篇文章主要說明圖標(biāo)的使用和制作。在中可以在任何地方復(fù)用文件中定定義的的形，包括和已經(jīng)。 showImg(https://segmentfault.com/img/bVvef3); 關(guān)于瀏覽器圖標(biāo)解決方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...
摘要：結(jié)論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結(jié)論選擇或許是一個(gè)不錯(cuò)地選擇去替代的使用方式。 這可能是個(gè)別人寫過很多次的話題，但貌似由于兼容性的原因？圖標(biāo)的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？希望通過自己新瓶裝舊酒的方式能重新引導(dǎo)一下問題。 SVG vs I...
閱讀 718·2021-09-24 09:48
閱讀 2516·2021-08-26 14:14
閱讀 542·2019-08-30 13:08
閱讀 1475·2019-08-29 15:22
閱讀 3112·2019-08-29 11:06
閱讀 1029·2019-08-26 18:26
閱讀 1132·2019-08-26 13:53
閱讀 2605·2019-08-26 12:21
