Vue 3 中的 Fontawesome 6 个抛出错误

Question

我正在尝试在我的

fontawesome 5

项目中从

6

升级到

vue 3

，但是当我尝试加载图标时，它会抛出以下错误：

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

Answer 2

我不知道这是否会变得有趣，无论如何，fontawesome 6 现在与 vue 3 兼容

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

来自fontawesome官方网站