摘要:起因看到項目中很多,使用方法都是使用標簽引入。解決方案在網上了解到可以將眾多文件合并成一個,用的方式區分不同的圖案,然后使用標簽引用。在版本廢棄了命令,不再支持自定義,而中的未提供自定義或是執行外掛腳本的配置。
起因
看到項目中很多svg,使用方法都是使用img標簽引入。于是就想將svg合并,像字體圖標那樣方便使用。
解決方案??在網上了解到可以將眾多svg文件合并成一個,用symbol+id的方式區分不同的svg圖案,然后使用use 標簽引用。
??在 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放在項目的編譯過程中去,由于項目使用的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文件??梢匀ttps://github.com/manfredste... 了解更多信息
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109762.html
摘要:它是基于,由聯盟進行開發的。是一種采用來描述二維圖形的語言這個大家都知道,那么元素是什么呢單純翻譯的話,是符號的意思,然我的理解是元素用來定義一個圖形模板對象,它可以用一個元素實例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 大家好,這里是@IT·平頭哥聯盟,我是首席填坑官——蘇南(South·Su),...
摘要:關于瀏覽器圖標解決方案,一直就有很多以及相對而言矢量圖標以及支持瀏覽器自身解析的優點,很多團隊都已經在使用了。這篇文章主要說明圖標的使用和制作。在中可以在任何地方復用文件中定定義的的形,包括和已經。 showImg(https://segmentfault.com/img/bVvef3); 關于瀏覽器圖標解決方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon...
摘要:關于瀏覽器圖標解決方案,一直就有很多以及相對而言矢量圖標以及支持瀏覽器自身解析的優點,很多團隊都已經在使用了。這篇文章主要說明圖標的使用和制作。在中可以在任何地方復用文件中定定義的的形,包括和已經。 showImg(https://segmentfault.com/img/bVvef3); 關于瀏覽器圖標解決方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon...
摘要:結論綠色部分表示比略勝一籌的地方,黃色部分表示有所欠缺的地方,灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結論選擇或許是一個不錯地選擇去替代的使用方式。 這可能是個別人寫過很多次的話題,但貌似由于兼容性的原因?圖標的顯示還是用著 Iconfont 或者 CSS Sprite 的形式?希望通過自己新瓶裝舊酒的方式能重新引導一下問題。 SVG vs I...
閱讀 630·2021-09-24 09:48
閱讀 2492·2021-08-26 14:14
閱讀 517·2019-08-30 13:08
閱讀 1445·2019-08-29 15:22
閱讀 3067·2019-08-29 11:06
閱讀 1001·2019-08-26 18:26
閱讀 1035·2019-08-26 13:53
閱讀 2514·2019-08-26 12:21