Using fontawesome with VueJS

Hello,

I have a problem to use fontawesome with VueJS.

I have all done like in the documentation : https://fontawesome.com/docs/web/use-with/vue/#_1-add-svg-core

This should work but doesn't work.

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

But this works instead.

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

Do you see something bad in my code ? What could explain this behavior ?

Thanks for your help ;).

My main.js.

// VueJS
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuex from 'vuex'

// Element-Plus
import ElementPlus from 'element-plus'
//import 'element-plus/theme-chalk/index.css'
import './assets/mytheme.scss'
import locale from 'element-plus/es/locale/lang/fr'

// Fontawesome
import { library } from "@fortawesome/fontawesome-svg-core"
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
import { faHome, faUserSecret } from "@fortawesome/free-solid-svg-icons"

library.add(faHome, faUserSecret)

createApp(App)
	.use(store)
	.use(router)
	.use(ElementPlus, { locale })
	.use(Vuex)
	.component("font-awesome-icon", FontAwesomeIcon)
	.mount('#app')

And my App.vue.

<template>

  <nav-menu></nav-menu>
  
  <div class="content">
    <font-awesome-icon :icon="['fa', 'home']"></font-awesome-icon>
    <router-view></router-view>
  </div>

</template>