"@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",

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

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

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