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?: booleanfixedWidth?: booleanflip?: 'horizontal' | 'vertical' | 'both'
icon: object | Array<string> | string | IconDefinitionmask?: object | Array<string> | stringmaskId?: object | Array<string> | stringlistItem?: booleanpull?: 'right' | 'left'pulse?: booleanrotation?: 90 | 180 | 270 | '90' | '180' | '270'swapOpacity?: booleansize?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x'spin?: booleantransform?: object | stringsymbol?: boolean | stringtitle?: stringtitleId?: stringinverse?: booleanbounce?: booleanshake?: booleanbeat?: booleanfade?: booleanbeatFade?: booleanspinPulse?: booleanspinReverse?: 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 - 全球开发者的开源社区,开源代码托管平台