阿里云圖標(biāo)icon使用symbol 引用

這是一種全新的使用方式，應(yīng)該說這才是未來的主流，也是平臺目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與上面兩種相比具有如下特點：

支持多色圖標(biāo)了，不再受單色限制。
通過一些技巧，支持像字體那樣，通過font-size,color來調(diào)整樣式。
兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
瀏覽器渲染svg的性能一般，還不如png。
使用步驟如下：

第一步：拷貝項目下面生成的symbol代碼：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

如圖中所示：

第二步：加入通用css代碼（引入一次就行）：

<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;//填充當(dāng)前的顏色overflow: hidden;} </style>

問題：
如果你想改變原有的顏色，填充的其他顏色，會遇到填充的的fill顏色可能不完全是你要填充的其他顏色，比如：fill：#fff，之后頁面只有兩個是白色其他還是原有的顏色。
解決：icon會有個多色的情況，路徑的原因里面默認(rèn)的填充顏色是黑色（是你矢量庫圖標(biāo)項目中默認(rèn)的顏色），是它本身的多色導(dǎo)致的。
方法一：刪除矢量庫圖標(biāo)項目中的圖標(biāo)，再重新下載，下載的時候選擇，單色圖標(biāo)，再重新使用的時候就可以使用fill填充的顏色了

方法二：直接在矢量庫圖標(biāo)項目中修改你需要的圖標(biāo)顏色，使用 fill: currentColor，就可以使用當(dāng)前顏色了

第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use> </svg>

如圖示：

總結(jié)

以上是生活随笔為你收集整理的阿里云图标icon使用symbol 引用方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。