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;
overflow: hidden;
}
</style>
第三步:挑選相應(yīng)圖標(biāo)并獲取類名拂募,應(yīng)用于頁面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>