vue3实战第四步：引入Font Awesome图标库(二)

Font Awesome是一个第三方提供的图标库，v5版本提供了1820个图标，可以覆盖大部分的图标使用场景了。

官网地址：https://fontawesome.com.cn/v5
Font Awesome提供的Vue3组件依赖：https://www.npmjs.com/package/@fortawesome/vue-fontawesome

1.1、安装依赖

//Font Awesome图标库专门针对Vue项目提供了一个官方组件，只需要引入相应的图标依赖就可以使用了，首先安装下面依赖。

# 安装 font-awesome 图标库的依赖
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome@prerelease

# 安装 font-awesome 图标库的依赖
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
cnpm i --save @fortawesome/vue-fontawesome@latest-3

# 安装 font-awesome 图标库的依赖
cnpm i --save @fortawesome/fontawesome-svg-core
cnpm i --save @fortawesome/free-solid-svg-icons
cnpm i --save @fortawesome/vue-fontawesome@latest-3

 1.2、注册图标组件：需要在main.js入口文件中，按需引入要使用的图标组件，并且要将Font Awesome提供的图标组件挂载到Vue3实例对象中

// 引入 font-awesome 图标库
import {library} from'@fortawesome/fontawesome-svg-core';
import {FontAwesomeIcon} from'@fortawesome/vue-fontawesome';
// 按需引入要使用的图标，例如：我要使用 faHome 这个图标，那就需要引入这个图标
import {faHome} from'@fortawesome/free-solid-svg-icons';

// 添加图标到库中
library.add(faHome);

// 创建Vue3实例对象
const app = createApp(App);
// 注册图标组件
app.component('font-awesome-icon', FontAwesomeIcon);
// 挂载Vue3实例到 #app 容器
app.mount('#app');

1.3、main.js完整配置

1.3、<font-awesome-icon>组件

font-awesome提供了一个<font-awesome-icon>组件，在Vue3项目中可以直接通过这个组件访问到相应的图标。<font-awesome-icon>组件有下面这几个常见的属性：

<font-awesome-icon>组件没有提供图标颜色的属性，要修改图标的颜色，可以使用下面几种方式：

<!-- 
 直接使用 style="color:red;" 修改图标颜色
-->
<font-awesome-icon :icon="['fad', 'home']" size="2xl" style="color: red"/>

<font-awesome-icon>组件中的props属性源代码：

interface FontAwesomeIconProps {
  border?: boolean
  fixedWidth?: boolean
  flip?: 'horizontal' | 'vertical' | 'both'
icon: object | Array<string> | string | IconDefinition
  mask?: object | Array<string> | string
  maskId?: object | Array<string> | string
  listItem?: boolean
  pull?: 'right' | 'left'
  pulse?: boolean
  rotation?: 90 | 180 | 270 | '90' | '180' | '270'
  swapOpacity?: boolean
  size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x'
  spin?: boolean
  transform?: object | string
  symbol?: boolean | string
  title?: string
  titleId?: string
  inverse?: boolean
  bounce?: boolean
  shake?: boolean
  beat?: boolean
  fade?: boolean
  beatFade?: boolean
  spinPulse?: boolean
  spinReverse?: boolean
}

1.4、使用图标

<template>
  <div>
    <div>icon字符串形式</div>
    <font-awesome-icon icon="fas fa-home" />
    <div>icon数组形式</div>
    <!-- 使用图标 -->
    <font-awesome-icon :icon="['fas', 'home']" />
    <font-awesome-icon :icon="['fad', 'home']" size="2xl"/>
    <font-awesome-icon :icon="['fad', 'home']" size="2xl" spin/>
    <font-awesome-icon :icon="['fad', 'home']" size="2xl" style="color: red"/>
  </div>
</template>

另外，需要注意一点，图标样式有四种可选值，分别是：fal、far、fas、fad。

<!-- 数组方式 
 fas：表示使用哪种图标样式，有四个可选值：fal、far、fas、fad。
 home：图标名称
-->
<font-awesome-icon :icon="['fas', 'home']" />

源码地址：GitCode - 全球开发者的开源社区,开源代码托管平台