I'm trying to use Font Awesome with Vue 3.
I have it in my 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",
}
Imported FontAwesome in 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")
And this inside component in <template>
<font-awesome-icon :icon="['fas', 'faPhone']" />
But when I use it in component nothing is happening... In element is doent's render anything it only shows HTML comment
<!---->
How can I fix this problem and start using FontAwesome in any Component?
Tony19 is correct but if you want to avoid cluttering your main.ts(js) file, you can do something like this:
What you can do is create a separate file:
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;
Then in your 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");
These steps got it working for me:
Install prelease (3.0.0-4) of vue-fontawesome, which is compatible with Vue 3, and the icon dependencies:
npm i --save @fortawesome/vue-fontawesome@prerelease
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
In main.js, select the icons from @fortawesome/free-solid-svg-icons to load:
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons";
library.add(faPhone);
Globally register the font-awesome-icon component:
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.mount("#app");
In src/App.vue, use the component like this (note the icon name is phone, not faPhone):
<!-- explicit style -->
<font-awesome-icon :icon="['fas', 'phone']" />
<!-- implicit style (fas is assumed) -->
<font-awesome-icon icon="phone" />