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