我正在尝试在我的 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文件中，如下所示:
<fa class="icon" :icon="[ 'fa', 'landmark' ]"></fa>
我做错了什么？
最佳答案
关于vue.js - Vue 3 中的 Fontawesome 6 throw 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71075697/