使用svg代替iconfont的好處：iconfont無法顯示復(fù)雜的圖形；svg是矢量圖；svg標(biāo)簽內(nèi)部可以添加title和desc標(biāo)簽，有利于SEO和無障礙閱讀。

使用svg代替iconfont的好處：

• iconfont無法顯示復(fù)雜的圖形；
• svg是矢量圖；
• svg標(biāo)簽內(nèi)部可以添加title和desc標(biāo)簽，有利于SEO和無障礙閱讀。

svg sprite圖：將若干個svg圖標(biāo)組合到一個文件上，可以減少網(wǎng)絡(luò)請求的次數(shù)，通過#獲取指定的圖標(biāo)：

<svg class="icon">
    <use xlink:href="img/sprite.svg#icon-example"></use>
</svg>

在 CSS 中可以很方便的編輯圖標(biāo)的樣式（大小、顏色）：

.icon{
    width: 2rem;
    height: 2rem;
    fill: #999;
}

資源網(wǎng)站：? IcoMoon App

選擇需要的圖標(biāo)，然后點擊右下角的Generate SVG & More：

默認(rèn)會生成SVG和PNG，可以點擊左下角的齒輪圖標(biāo)設(shè)置，取消勾選PNG，僅下載svg：