Fontawesome 6 在 Vue 3 中抛出错误

Question

我正在尝试将我的 vue 3 项目从 fontawesome 5 升级到 6，但是当我尝试加载图标时，它会抛出这些错误：

Vue warn]: Unhandled error during execution of render function 
  at <FontAwesomeIcon class="icon" icon= Array(2) > 
  at <Benefits> 
  at <App>
warn @ app.js:29973
app.js:30153 Uncaught TypeError: Cannot read properties of undefined (reading 'icon')
    at Proxy.render (app.js:12923:26)
    at renderComponentRoot (app.js:23853:44)
    at ReactiveEffect.componentUpdateFn [as fn] (app.js:27701:57)
    at ReactiveEffect.run (app.js:22221:29)
    at setupRenderEffect (app.js:27827:9)
    at mountComponent (app.js:27610:9)
    at processComponent (app.js:27568:17)
    at patch (app.js:27169:21)
    at mountChildren (app.js:27356:13)
    at mountElement (app.js:27265:17)
app.js:29973 [Vue warn]: Unhandled error during execution of mounted hook 
  at <SvgProgressLine> 
  at <App>
warn @ app.js:29973
2app.js:35773 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getTotalLength')
    at app.js:35773:29
    at callWithErrorHandling (app.js:30090:22)
    at callWithAsyncErrorHandling (app.js:30099:21)
    at Array.hook.__weh.hook.__weh (app.js:25359:29)
    at flushPostFlushCbs (app.js:30288:47)
    at flushJobs (app.js:30333:9)

我已经按照 docs 安装了这些版本 packages.json:

"@fortawesome/fontawesome-svg-core": "^1.3.0-beta3",
"@fortawesome/free-brands-svg-icons": "^6.0.0-beta3",
"@fortawesome/free-regular-svg-icons": "^6.0.0-beta3",
"@fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
"@fortawesome/vue-fontawesome": "^2.0.6",

它们是在 app.js 中导入的，如下所示：

import {library} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {faEnvelope, faCog, faGlobe, faServer, faKey, faSearch, faWrench, faCommentDollar, faHandsHelping, faChartBar, faExclamationTriangle, faLandmark, faUserCheck} from '@fortawesome/free-solid-svg-icons'

library.add(faEnvelope, faCog, faGlobe, faServer, faKey, faSearch, faWrench, faCommentDollar, faHandsHelping, faChartBar, faExclamationTriangle, faLandmark, faUserCheck);

createApp(app)
    .component('fa', FontAwesomeIcon)
    .use(VueSmoothScroll)
    .use(i18n)
    .mount("#app");

并在vue file中显示如下：

<fa class="icon" :icon="[ 'fa', 'landmark' ]"></fa>

我做错了什么？

Answer 1

好像还不支持 Vue 3:

https://fontawesome.com/v6/docs/web/use-with/vue/troubleshoot#using-vue-3

Fontawesome 6 在 Vue 3 中抛出错误

Fontawesome 6 throwing errors in Vue 3

vue.js

font-awesome

vuejs3

font-awesome-6