使用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项目官网：点击直达

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如下：

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，如果想自定义图标样式或者自定义图标，也可以参考官网即可