在Vuetify中无法显示fa-folders图标问题求助

问题情况 #

使用Vuetify搭配Font Awesome图标时，整体运行状态正常，但fa-folders图标无法正常渲染，控制台抛出找不到图标的错误。

控制台报错 #

Couldn't find one or more icon(s) {prefix: 'fas', iconName: 'fa-folders'}

相关代码与依赖 #

.ts 文件 #

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

Vue.component('icon-fa', FontAwesomeIcon)
//@ts-ignore
library.add(fas, far)

.vue 文件 #

<icon-fa
  style="font-size: 19px;"
  v-on="on"
  :icon="['fas','fa-folders']"
  class="mr-0 theme--light v-icon">
</icon-fa>

package.json 依赖配置 #

"dependencies": {
  "@fortawesome/fontawesome-svg-core": "^1.2.35",
  "@fortawesome/free-regular-svg-icons": "^5.15.3",
  "@fortawesome/free-solid-svg-icons": "^5.15.3",
  "@fortawesome/vue-fontawesome": "^0.1.10"
 },
"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3"
}

解决方案 #

原因分析 #

你使用的Font Awesome 5.15.3版本中，Solid库（fas）并不包含fa-folders图标——该图标是Font Awesome 6版本新增的。

方案1：替换为5.x版本存在的图标 #

如果不需要复数文件夹样式，直接改用Font Awesome 5中已有的图标，比如fa-folder-open：
修改.vue文件中的图标配置：

<icon-fa
  style="font-size: 19px;"
  v-on="on"
  :icon="['fas','fa-folder-open']"
  class="mr-0 theme--light v-icon">
</icon-fa>

方案2：升级到Font Awesome 6.x版本 #

如果确实需要fa-folders图标，需升级所有Font Awesome相关依赖到6.x版本：

1. 修改package.json中的依赖版本：

"dependencies": {
  "@fortawesome/fontawesome-svg-core": "^6.4.0",
  "@fortawesome/free-regular-svg-icons": "^6.4.0",
  "@fortawesome/free-solid-svg-icons": "^6.4.0",
  "@fortawesome/vue-fontawesome": "^3.0.3"
},
"devDependencies": {
  "@fortawesome/fontawesome-free": "^6.4.0"
}

2. 执行npm install或yarn install更新依赖。
3. 注意：若你的项目基于Vue 2，需将@fortawesome/vue-fontawesome指定为2.x版本（如^2.0.10），3.x版本仅适配Vue 3。

内容的提问来源于stack exchange，提问作者Kirill