如何將阿里巴巴矢量圖引入vue

網址：

vue使用小技巧之如何使用阿里巴巴矢量圖標庫

用戶1272076

 

發表於 張培躍訂閱

88

助力數字生態，雲產品優惠大促

騰訊雲促銷，1核1G 99元/1年，2核4G 1200元/3年

當即搶購

阿里巴巴矢量圖標庫介紹：設計師將圖標上傳到Iconfont平臺，用戶能夠自定義下載多種格式的icon，平臺也可將圖標轉換爲字體，便於前端工程師自由調整與調用。

目前擁有icon即將突破500萬。

網址：https://www.iconfont.cn

本篇文章將會爲小夥伴們詳細圖解——在vue中如何使用阿里巴巴矢量圖標！

---

一、打開阿里巴巴矢量圖標庫網址

---

二、註冊並登錄（略）

---

三、點擊圖標管理—》個人項目，而後建立項目。

---

四、添加新建項目的信息

---

五、任意搜索一個圖標，例如「elementui」

---

六、在搜索結果中，請將鼠標移入到你心儀的圖標，而後點擊購物車（不愧是阿里，作什麼都有種電商的味道）將你的圖標入庫！

---

七、入庫後，網頁右上角的購物車圖標會有紅色警示，點它！

---

八、而後點擊「添加至項目」。選擇好加入的項目後，點擊肯定。

---

九、將你的圖標下載至本地。

---

十、下載並解壓縮的文件以下圖：

---

十一、在文件複製到項目中（刪除demo開頭的文件），個人地址是：src/assets/iconfont

---

十二、在main.js中引入阿里巴巴矢量圖標庫

import "@/assets/iconfont/iconfont.css"; 

---

1三、樣式在iconfont.css中

.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.iconelementui:before { content: "\e604";}

---

1四、使用：

<template> <div id="app"> <i class="iconfont iconelementui"></i> </div></template> <style scoped> .iconelementui { color: red; font-size: 200px; } #app { text-align: center; }</style>

---

1五、預覽結果：