vue中使用阿里iconfont矢量圖標

1. 這里介紹一下vue項目中如何使用阿里的iconfont圖標庫，首先來看一下:阿里爸爸的iconfont矢量圖標庫官網
2. 打開 iconFont官網 選擇自己喜歡的圖標，並且添加購物車，如下圖：
3. 點擊購物車，出現剛才選中的圖標，然后再點擊 添加至項目：

4.  

    給項目取名，點擊確定：

5.  

    點擊確定之后，在彈出的新的頁面里面，點擊下載至本地

    

    

6. 下載之后解壓縮會發現有10個文件，3個demo.html等等

7.  

    在vue項目中創建iconfont文件夾，把下載好的文件放在iconfont里面：

    

    

8. 然后就可以全局引入，在main.js中引入iconfont.css樣式

   import './assets/iconfont/iconfont.css'（這是我的文件路徑，如果在不同的項目下需要注意）

   import 'xxx/xxx/xxx/iconfont.css'

   在組件中使用方法就和方法1一樣了。

    

    

9. 可能會報錯，需要下載css-loader依賴包   npm install css-loader --save
10. 引用成了關鍵：我們打開之前說的十個文件里面的demo_index.html 文件

     

     

11. 點擊文件名的那個tab

     

     

12. 將class里面的icon iconfont icon-dayinji賦值，就是我們要用的圖標

     

     

13. 把這個class的名字貼到我們的代碼里面，就可以使用了，此篇文章是作者的處女作，如果對你有幫助，點個贊呢，筆芯
14. 本文是受到該鏈接的啟發完成，比該鏈接的作者，寫的稍微全面一些：https://www.cnblogs.com/chinabin1993/p/8184296.html