在 Vue 3 中使用 Font Awesome答案

【问题标题】：Using Font Awesome in Vue 3在 Vue 3 中使用 Font Awesome
【发布时间】：2021-05-29 01:54:35
【问题描述】：

我正在尝试在 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",
}

在main.js导入FontAwesome

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']" />

但是当我在组件中使用它时，什么都没有发生...在元素中不渲染任何内容，它只显示 HTML 注释

如何解决此问题并开始在任何组件中使用 FontAwesome？

【问题讨论】：

标签： javascript vue.js vue-component vuejs3

【解决方案1】：

这些步骤让它对我有用：

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

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

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

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

library.add(faPhone);

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

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

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

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

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

<!-- implicit style (fas is assumed) -->
<font-awesome-icon icon="phone" />

demo

【讨论】：

好吧，问题基本上只是我写了['fas', 'faPhone']而不是['fas', 'phone']

【解决方案2】：

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

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

fontawesome-icons.ts

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

library.add(faPhone);
library.add(faUser);
library.add(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("font-awesome-icon", FontAwesomeIcon)
    .use(store)
    .use(router)
    .mount("#app");

【讨论】：