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