How can I import icons to Laravel + Vue.js

Question

Recently I ran into the problem of importing Fontawesome icons to Vue.js in Laravel. In this way, I could import the Spinner icon that I took from the tutorial. But, how can I get the name of other such icons or import them in another easier way?

app.js:

require('./bootstrap');


import { createApp } from 'vue'


import Home from './components/Home.vue';
import Offers from './components/Offers.vue';

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faSpinner } from "@fortawesome/free-solid-svg-icons";

const app=createApp({});

app.component('home',Home);
app.component('offers',Offers);
app.component("font-awesome-icon", FontAwesomeIcon);
library.add(faSpinner);

app.mount('#app');

Vue component:

<font-awesome-icon 
   icon="spinner" 
   size="3x" 
   spin fixed-width>
 </font-awesome-icon>

Answer 1

The directions are found here: https://fontawesome.com/docs/web/use-with/vue/.

import Vue from 'vue'
import App from './App'

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

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

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

/* add icons to the library */
library.add(faUserSecret)

/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

---

<template>
  <div id="app">
    <!-- Add the style and icon you want -->
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>