vue项目中使用vue-awesome

公司在项目重构时，遇到图标问题，而后把vue-awesome、iconfont、iconMoon都试了一遍，虽然最终使用了iconMoon可是也要把这两个过程记录一下。

github地址

1.首先安装vue-awesome依赖包

安装方法：

使用npm安装

npm install vue-awesome

 

使用bower安装

bower install vue-awesome

注意：安装以后打开node_modules文件夹，查看是否有vue-awesome文件夹，若是没有看是不是编辑器太慢的缘由，也能够重启一下看是否有该文件

若是尚未表示没有安装成功，须要从新安装

 

 

2.在main.js文件下

在github上能够明确看到若是考虑项目大小，只导入用于减小包大小的图标

import 'vue-awesome/icons/flag'

不然

import 'vue-awesome/icons'

这里我不考虑大小使用第二种

而后

import Icon from 'vue-awesome/components/Icon'

全局使用 Vue.component('icon',Icon)

 

这里是个人代码提供参考

 

接下来就能够去在任何.vue组件中使用了！

这里我在最新刚刚下载好的vue-cli项目中试用一下，看一下效果

 <icon name="beer"></icon>

就会看到

 

若是你不知道，这些图标有哪些，叫什么名字，能够去font awesome官网上查看，vue-awesome是基于font awesome图标库来的

传送门送你离开