在Vue3中使用FontAwesome

html5 • • 问答

我正在尝试在 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？

回答

这些步骤让它对我有用：

  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

    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要加载的图标：

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

演示

以上是在Vue3中使用FontAwesome的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>