在Vue中使用icon 字体图标

2019-06-14

1.使用线上的阿里iconfont图标库

1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目

3 生成链接 clipboard.png4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。

2但是考虑网络及用户体验 阿里iconfont下载本地使用

1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹 把这些文件放入文件夹 clipboard.png3 iconfont.css文件中改路径 clipboard.png4 在main.js中引入iconfont.css文件 clipboard.png5直接使用

3使用vue-awesome

1.首先安装vue-awesome依赖包 npm install vue-awesome 2.在main.js文件下 在github上可以明确看到如果考虑项目大小,只导入用于减少包大小的图标

import 'vue-awesome/icons/flag' 或者不考虑大小

clipboard.png

直接使用 <icon name="beer"></icon>

4使用IconMoon

挺好用 iconMoon可以生成自己的矢量图,这点是我喜欢的 1.如果想要直接使用它们自带的官方图标 选择我们想要的图标之后,点击右下角的Generate Font F

clipboard.png

clipboard.png

这时会看到我们已经选择的图标,在这里可以修改名称等,然后点击右下角的下载 2接下来在vue项目中创建文件夹,打开style.css样式,修改引入字体的路径(不同路径写的方式不一样,需要注意)

clipboard.png3在main.js中全局引入 import '@/assets/css/icomoon/style.css'

如果想要使用我们自己画的.svg格式的矢量图图标,点击Import Icons 导入我们本地的.svg格式的图标(注意,矢量图是用矢量线画的,png,jpg等使用像素来的,不可以直接用png转成svg格式,否则不成功) 引入之后,接来下就和上面的步骤一样了。 4直接使用

原文链接:segmentfault.com

上一篇:vuejs全局运行机制
下一篇:基于Proxy的小程序状态管理
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部