Vue 3: Add font-awsome icons

Tech detail:

• Ubuntu 22.04
• VueJS 3
• Font-awsome
• TypeScript

URLs:
https://www.npmjs.com/package/@fortawesome/vue-fontawesome
https://fontawesome.com/icons

Install

Your package.json should looked like this

"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/vue-fontawesome": "^3.0.0-5",

Run these commands (these might have more than what you need)

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

Update main.js

Your src/main.ts should looked like this

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

import { library } from "@fortawesome/fontawesome-svg-core";
import { faTrashCan } from "@fortawesome/free-solid-svg-icons"; <--- Add any icons you need here
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

const app = createApp(App);

library.add(faTrashCan);
app.component("font-awesome-icon", FontAwesomeIcon);

app.use(createPinia());
app.use(router);

app.mount("#app");

Usage

A file which uses the trash icon will looked like this

<template>
  <div class="delete-item">
    <slot id="id"><font-awesome-icon :icon="['fas', 'trash-can']" /></slot>
  </div>
</template>

<style scoped>
.delete-item {
  margin: 1rem;
  padding: 0.5rem;
}
</style>

Result