在 Vue 3 中使用 Font Awesome

Question

我正在尝试在 Vue 3 中使用 Font Awesome。

我有它在我的 package.json

"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/vue-fontawesome": "^3.0.0-3",
}

导入的 FontAwesome main.js

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

library.add(faPhone);

/* eslint-disable */
createApp(App)
  .use(store)
  .use(router)
    .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app")

而这个内部组件在 <template>

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

但是当我在组件中使用它时什么也没有发生......在元素是 doent 的渲染任何东西它只显示 HTML 注释
<!---->
如何解决这个问题并开始在任何组件中使用 FontAwesome？

Answer 1

这些步骤让它对我有用：

1. 安装prelease( 3.0.0-4) of vue-fontawesome，兼容Vue 3，以及图标依赖：

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

2. 在 中main.js，选择@fortawesome/free-solid-svg-icons要加载的图标：

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

3. 全局注册font-awesome-icon组件：

   import { library } from "@fortawesome/fontawesome-svg-core";
   import { faPhone } from "@fortawesome/free-solid-svg-icons";
   
   library.add(faPhone);
   

4. 在 中src/App.vue，像这样使用组件（注意图标名称是phone，不是faPhone）：

   import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
   
   createApp(App)
     .component("font-awesome-icon", FontAwesomeIcon)
     .mount("#app");
   

演示

Answer 2

Tony19 是正确的，但如果你想避免你的 main.ts(js) 文件混乱，你可以这样做：

您可以做的是创建一个单独的文件：

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;

然后在你的main.ts：

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import "@/assets/css/main.scss";
import router from "./router";
import store from "./store";
import FontAwesomeIcon from "@/utilities/fontawesome";

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

Answer 3

安装

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

在你的 main.ts 上

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

用于 .vue 文件

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

Answer 4

为了方便，但会牺牲包的大小和速度。您可以一次导入所有图标

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'

//Add all icons to the library so you can use it in your page
library.add(fas, far, fab)

来源官方 fontawesome 文档