Vue3如何使用fontAwesome呢？

我正在尝试在 Vue3 中使用 FontAwesome

已经在 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");

And this inside component in <template>

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

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

解决方法

我使用以下方法，可以使用

安装 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

在 main.js，动态加载要使用的图标

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";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons";

library.add(faPhone);

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

解决方法二

在上述的基础上，可以把 icon 独立出来，避免动态配置的图标过多导致代码混乱

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

如果您有什么看法或意见，欢迎通过右边的反馈悬浮框反馈

本文为原创，未经同意授权，禁止任何媒体或个人自媒体以及任何声明式转载

商业侵权必究，如需授权请联系340443366@qq.com

原文链接：https://www.1024nav.com/faq/using-font-awesome-in-vue-3

解决方法​

解决方法二​

解决方法

解决方法二