Next.js中使用Font Awesome 6 Pro动态传图标名报错如何解决？

错误原因 #

这个报错是Font Awesome默认的摇树优化机制导致的：编译阶段它只会识别写死的字符串字面量来筛选需要打包的图标，传入变量时无法提前识别图标内容，就会抛出错误。

解决方法 #

根据你的项目场景可以选以下两种方案：

方案1：全量导入图标库，支持任意动态图标

适合用到的图标数量多、无法提前枚举所有可能用到的图标、不在意打包体积的场景。

1. 先在项目入口文件（如_app.tsx/_app.js）中注册所有需要用到的图标库：

import { library } from '@fortawesome/fontawesome-svg-core'
// 品牌图标导入，Pro版替换为对应的Pro包即可
import * as brandsIcons from '@fortawesome/free-brands-svg-icons'
// 如需使用其他类型图标，导入对应包即可，例：
// import * as solidIcons from '@fortawesome/free-solid-svg-icons'

// 批量将图标加入全局库
library.add(
  ...Object.values(brandsIcons),
  // ...Object.values(solidIcons)
)

2. 使用组件时改用数组格式传参，直接传入动态变量即可：

// example为从数据库获取的动态图标名
const example = "google"
<FontAwesomeIcon icon={['fab', example]} />

不同类型图标的前缀对应关系：

• 品牌图标：fab
• 实心图标：fas
• 常规图标：far
• Pro版专属的轻量/细柱等图标对应替换为对应前缀即可。

方案2：提前建立图标映射表，保留摇树优化

适合可以提前枚举所有可能用到的图标、需要控制打包体积的场景。

1. 新建图标映射文件iconMap.js，提前导入所有需要用到的图标并建立映射：

import { faGoogle, faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'
// 其他需要用到的图标依次导入

export const iconMap = {
  google: faGoogle,
  github: faGithub,
  twitter: faTwitter,
  // 所有数据库可能返回的图标名都在此处建立映射
}

2. 组件使用时直接从映射表取值即可：

const example = "google"
<FontAwesomeIcon icon={iconMap[example]} />

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