天天看點

怎麼使用 Iconfont 的 svg 矢量圖示

場景:ui設計師把設計圖示上傳到 Iconfont ,前端從Iconfont下載下傳所有圖示,然後在代碼中使用

第一步:把項目的svg下載下傳到本地

怎麼使用 Iconfont 的 svg 矢量圖示

解壓打開是這樣的:

怎麼使用 Iconfont 的 svg 矢量圖示

第二步:把下載下傳的檔案放進項目assets路徑下

怎麼使用 Iconfont 的 svg 矢量圖示

第三步:在main.js中引入iconfont檔案

怎麼使用 Iconfont 的 svg 矢量圖示

第四步:在業務頁面使用,其中xlink:href就是對應的svg的id

怎麼使用 Iconfont 的 svg 矢量圖示

svg的id可以在Iconfont複制,很友善:

怎麼使用 Iconfont 的 svg 矢量圖示

搞定。