在 Vue 3 中使用 Font Awesome

Question

我正在尝试将 Font Awesome 与 Vue 3 一起使用。

我有它在我的 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？

原文由 Šimon Slabý 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这些步骤使它对我有用：

1. 安装兼容Vue 3的 vue-fontawesome 的 latest-3 （ 3.0.1 ），以及图标依赖：

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

1. 在 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);

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

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

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

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

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

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

演示

原文由 tony19 发布，翻译遵循 CC BY-SA 4.0 许可协议

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");

原文由 Riza Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议