Fontawesome и Vue3. Не подключается иконка
Есть необходимость подключить данную иконку:
https://fontawesome.com/icons/backward-step?s=solid
При подключении прошлых иконок - код выглядел примерно следующим образом:
// package.json
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.1"
}
// main.ts
import { createApp } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faYoutube, faGithub } from '@fortawesome/free-brands-svg-icons'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
library.add(fas, faYoutube, faGithub)
createApp(App)
.use(store)
.use(router)
.component('fa', FontAwesomeIcon)
.mount('#app')
// some component
<div class="rewindChartApp">
<fa icon="coffee" size="lg"></fa>
</div>
Все работало нормально в такой конфигурации.
Вопрос:
Как корректно подключить в текущую конфигурацию новую вышеупомянутую иконку?
Если пробовать просто добавлять вот такой код в HTML - получаем следующий результат:
<template>
<div class="rewindChartApp">
<font-awesome-icon icon="fa-solid fa-backward-step" />
<fa icon="coffee" size="lg"></fa>
</div>
<!-- <div class="rewindChartApp"> end -->
</template>
[Vue warn]: Failed to resolve component: font-awesome-icon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <RewindChartApp>
at <Vue3DraggableResizable class="chartApp" parent=true initW=750 ... >
at <ChartApp>
at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
Иконка само собой вообще не отображается в данном случае.
P.S. Pro версии у меня нет - расчитываю на Free вариант.