使用vue-cli整合vue-awesome集成步骤详解

我们在使用vue-cli脚手架开发vue项目时，经常会用到一些图标，虽然有一些框架自带了一些图标，不过数量有限，比如Element UI，里面的图标往往不能满足我们的需求，因此我们通常会整合vue-awesome来丰富图标的选择性。下面潘老师来带大家一起看看如何整合vue-awesome。

一、初识vue-awesome

1、vue-awesome是基于 Vue.js 的强大 SVG 图标组件。已内置 Font Awesome 图标。

2、vue-awesome项目官网：点击直达

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

3、font-awesome英文官网：点击直达英文官网
font-awesome中文官网：点击直达中文官网，不过有些icon名称与vue-awesome不匹配（我们不参考这个，应该参考英文的官网）

二、使用vue-awesome

1、我这里使用vue-cli新建vue项目，命名为awesome-app

2、打开awesome-app项目终端，运行如下指令安装awesome-app：

npm install vue-awesome

3、在main.js中注册，修改main.js如下：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

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')

[v_blue]提示：如果你考虑到打包体积，也可以用到哪些图标导入哪些图标，也可以局部注册，具体可参考官网说明，我们一般如上引用即可。
[/v_blue]

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’

用来指定图标是否需要翻转。