在Vue 3中使用Font Awesome

技术背景

Font Awesome是一个流行的图标库，提供了丰富的图标资源。在Vue 3项目中使用Font Awesome，可以方便地为项目添加各种图标。但由于Vue 3的一些特性和Font Awesome的使用方式，可能会遇到一些问题，下面将介绍如何在Vue 3中正确使用Font Awesome。

实现步骤

方法一：按需引入图标

1. 安装依赖

npm i --save @fortawesome/vue-fontawesome@latest-3
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons

2. 在main.js中选择要加载的图标并注册组件

import { createApp } from "vue";
import App from "./App.vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faPhone);

createApp(App)
  .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app");

3. 在组件中使用图标

<template>
  <!-- 显式指定样式 -->
  <font-awesome-icon :icon="['fas', 'phone']" />
  <!-- 隐式样式（默认是fas） -->
  <font-awesome-icon icon="phone" />
</template>

方法二：将图标配置分离到单独文件

1. 创建fontawesome-icons.ts文件

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone, faUser, faFlag } from "@fortawesome/free-solid-svg-icons";

library.add(faPhone, faUser, faFlag);

export default FontAwesomeIcon;

2. 在main.ts中引入并注册组件

import { createApp } from "vue";
import App from "./App.vue";
import FontAwesomeIcon from "@/utilities/fontawesome";

createApp(App)
    .component("FontAwesomeIcon", FontAwesomeIcon)
    .mount("#app");

方法三：使用dom.watch()

1. 安装依赖

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

2. 在main.ts中配置

import { createApp } from "vue";
import App from "./App.vue";
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

library.add(fas, far, fab);
dom.watch();

createApp(App)
    .component("font-awesome-icon", FontAwesomeIcon)
    .mount('#app');

3. 在.vue文件中使用

<template>
  <i class="fa-solid fa-arrow-left"></i>
  <i class="fa-brands fa-facebook"></i> 
</template>

方法四：一次性导入所有图标

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

// 将所有图标添加到库中
library.add(fas, far, fab)

核心代码

以下是方法一的完整核心代码示例：

main.js

import { createApp } from "vue";
import App from "./App.vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faPhone);

createApp(App)
  .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app");

App.vue

<template>
  <font-awesome-icon :icon="['fas', 'phone']" />
  <font-awesome-icon icon="phone" />
</template>

<script>
export default {
  name: 'App'
}
</script>

最佳实践

• 按需引入：如果项目中只需要使用少量图标，建议使用按需引入的方式，这样可以减少包的大小，提高加载速度。
• 分离配置：将图标配置分离到单独的文件中，可以使main.js文件更加简洁，易于维护。

常见问题

• 图标不显示：可能是图标名称使用错误，例如将['fas', 'faPhone']写成了['fas', 'phone']。确保图标名称正确，并且在library.add()中添加了相应的图标。
• 包版本不兼容：确保使用的@fortawesome/vue-fontawesome版本与Vue 3兼容，建议使用latest-3版本。