Mi servivano alcune icone per un nuovo progetto, sviluppato con Laravel e Vue3.
Cosa c'è di meglio se non il buon vecchio FontAwesome?

Per poter utilizzare le icone all'interno della propria applicazione sono necessari alcuni semplici passaggi.
Di seguito il procedimento utilizzando npm.

1 - Installare SVG Core

Come prima cosa installiamo un package iniziale che include tutte le utilities necessarie per far funzionare le icone.

npm i --save @fortawesome/fontawesome-svg-core

2 - Installare i package delle icone

Volendo installare le icone free inseriamo i comandi per importare i relativi package

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

3 - Installare il componente VUE

Per Vue 3.x il comando è

npm i --save @fortawesome/vue-fontawesome@latest-3

A questo punto una volta installato tutto è possibile iniziare a integrare le icone all'interno dell'applicazione.

4 - Setup delle librerie

Nel file main.js/app.js andiamo a importare tutti i componenti e inizializzare la libreria

/* Vue 3 */
import { createApp } from 'vue'
import App from './App.vue'

/* import fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import icone specifiche */
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* aggiunge le SINGOLE icone alla library */
library.add(faUser ,faUserSecret)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')

Nell'esempio vengono importate solo 2 icone specifiche.
Nel caso in cui volessimo importare tutte le icone per gli stili regular e solid possiamo modificare il codice in questo modo:

/* import TUTTE le icone SOLID + REGULAR */
import { fas } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";

/* aggiungo i set completi delle icone alla library */
library.add(fas, far);

5 - Usare le icone

A questo punto è tutto pronto e possiamo usare le icone all'interno dell'applicazione.
La libreria mette a disposizione 2 metodi, il formato stringa:

<font-awesome-icon icon="fa-solid fa-user-secret" />

oppure il formato array:

<font-awesome-icon :icon="['fas', 'user-secret']" />