vue-cli3中使用阿里巴巴矢量圖

介紹在vuecli中怎麼使用阿里巴巴矢量圖

1.登陸阿里巴巴矢量圖庫[https://www.iconfont.cn/]，如圖

2.選擇圖標—>添加到購物車

3.添加至項目

4.將圖標下載至本地

5.解壓

6.打開文件 ，刪除紅框中的兩個文件

7.引入

打開vue項目所在目錄 此處是D:vuetest/src/assets (根據本身項目的實際狀況寫路徑)

• 在 assets文件夾中新建icon文件夾

8.打開文件夾，將上圖的文件所有拉進去（選中直接拖進icon文件夾中）

9.使用

• 進入vscode打開項目
• 進入src—>assets–>icon中能夠看到以下

10.點擊進入（隨便挑一個展現）如圖 （紅框部分爲圖標名字）

11.在html中使用

• 先上效果圖

代碼

<p>微信</p>

解析:矢量圖用起來沒有顏色，我在這裏本身給他加上了綠色，還有class記得要用 icon iconfont

//本期的教程到這裏就結束啦,是否是很簡單!讓咱們一塊兒努力走向巔峯!