我们在使用vue-cli脚手架开发vue项目时，经常会用到一些图标，虽然有一些框架自带了一些图标，不过数量有限，比如Element UI，里面的图标往往不能满足我们的需求，因此我们通常会整合vue-awesome来丰富图标的选择性。下面潘老师来带大家一起看看如何整合vue-awesome。
1、vue-awesome是基于 Vue.js 的强大 SVG 图标组件。已内置 Font Awesome 图标。
2、vue-awesome项目官网：点击直达
3、font-awesome英文官网：点击直达英文官网
font-awesome中文官网：点击直达中文官网，不过有些icon名称与vue-awesome不匹配（我们不参考这个，应该参考英文的官网）
1、我这里使用vue-cli新建vue项目，命名为awesome-app
2、打开awesome-app项目终端，运行如下指令安装awesome-app：
npm install vue-awesome
3、在main.js中注册，修改main.js如下：
import Vue from 'vue'
import App from './App.vue'
// 一次引入全部图标
import 'vue-awesome/icons'
// 导入vue-awesome组件
import Icon from 'vue-awesome/components/Icon'
// 全局注册
Vue.component('icon', Icon)
new Vue({
render: h => h(App),
}).$mount('#app')
4、说明：
Font Awesome 5 开始把所有图标分成了多个包。Vue-Awesome 的图标都来自其中的免费图标，而免费图标分别来自 3 个不同的图标包：regular、solid 和 brands。因为 solid 下的免费图标数量最多，所以我们选择按如下方式来组织图标：
1）所有来自 solid 包的图标位于 vue-awesome/icons 目录下，且 name prop 的值不带前缀。
2）来自 regular 和 brands 的图标位于 vue-awesome/icons/regular 和 vue-awesome/icons/brands 目录下，且 name prop 的值需要添加前缀，例如 regular/flag 或者 brands/reddit。
请访问 Font Awesome 官网以查询可以使用的 name 值，如 beer、file、camera 等。
5、icon组件属性说明：
1）name: string
图标名称。如果本组件没有用作图标堆栈的容器，那么这个字段是必须的。所有合法的值都对应于图标文件相对于 icons 目录的路径。请注意当你在 FontAwesome 官网查找到图标名词后，需要确认一下图标集的名称。比如，在 500px 这个图标的详情页会有一个 URL 参数 style=brands，故图标名称就是 brands/500px。
默认情况下，只能使用 FontAwesome 的免费图标，另外由于 solid 样式中的图标最多，我们将其设为了默认图标集，所以路径前缀可以省略。
当传入 null 时，整个组件将不会渲染。
2）scale: number|string
用来调整图标尺寸，默认值为 1。
3）spin: boolean
用来指定图标是否需要旋转。默认值为 false。（不能与 pulse 一同使用。）
4）pulse: boolean
用来指定图标是否有脉冲旋转的效果。默认值为 false。（不能与 spin 一同使用。）
5）inverse: boolean
为 true 时图标颜色将被设置为 #fff。默认值为 false。
6）flip: ‘vertical’|’horizontal’|’both’
用来指定图标是否需要翻转。
7）label: string
当指定时会设置图标的 aria-label。
8）title: string
为图标设置标题。
label 与 title 均不存在时，图标将会包含 role="presentation" 声明，无法从辅助设备访问。1、修改App.vue的template如下：
<template>
<div id="app">
<!-- solid中图标，免前缀 -->
solid中广告图标-放大2.5倍效果：<icon name="ad" scale="2.5"></icon>
<br>
<!-- regular中图标，需要前缀 -->
regular中名片图标-旋转效果：<icon name="regular/address-card" spin="true" scale="2.5"></icon>
<br>
<!-- brands中图标，需要前缀 -->
brands中支付宝图标-脉冲效果：<icon name="brands/alipay" pulse="true" scale="2.5"></icon>
</div>
</template>
对应官网如下：
2、运行测试效果：
3，如果想自定义图标样式或者自定义图标，也可以参考官网即可
