React项目使用Font Awesome 6时找不到指定solid图标问题

项目依赖版本 #

"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0",
"styled-components": "^5.3.5"

问题描述 #

开发支持通过props传入参数选择Font Awesome fa-solid系列图标的自定义按钮组件时，参照文档写法调用fa-camera-web图标：

<FontAwesomeIcon icon="fa-solid fa-camera-web" />

运行后抛出报错：

Could not find icon { prefix: 'fas', iconName: 'camera-web' }

使用TypeScript类型断言传入通用camera图标名时组件可正常渲染：

<FontAwesomeIcon icon={"camera" as IconProp} />

但该方式渲染的是通用相机图标，不是目标camera-web图标，需要确认Font Awesome 6在React中的正确用法及报错解决方案。

• 字符串简写写法（即直接传"fa-solid fa-camera-web"格式）依赖全局图标库注册，未提前将所用图标加入库中时，组件无法通过字符串匹配到对应图标资源。
• 当前安装的@fortawesome/free-solid-svg-icons@6.1.1版本中camera-web图标真实存在，但未被注册到全局可检索的图标库，因此直接传字符串会触发找不到图标的报错。
• 直接传"camera"可正常渲染，是因为旧版兼容逻辑匹配到了通用camera图标，并非目标camera-web资源。

可根据项目场景二选一：

方案1：提前全局注册图标（适合固定图标集的项目） #

在项目入口文件（如Next.js的_app.tsx）中，将用到的solid系列图标统一注册到FontAwesome库，之后即可直接用字符串简写方式调用图标：

// 入口文件引入依赖
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCameraWeb, faCamera /* 其余需要用到的图标 */ } from '@fortawesome/free-solid-svg-icons'

// 注册图标到全局库
library.add(faCameraWeb, faCamera)

注册完成后，原字符串写法即可正常渲染camera-web图标：

<FontAwesomeIcon icon="fa-solid fa-camera-web" />

如果自定义按钮需要支持传入任意fa-solid图标，可以直接全量注册整个solid图标包，缺点是打包体积会相应增大：

import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)

方案2：显式传入图标对象（适合按需加载场景，打包体积最优） #

不需要全局注册，直接从图标包中引入目标图标，将图标对象传给icon属性即可，TypeScript环境下也不需要额外做类型断言：

import { faCameraWeb } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

// 组件内直接使用
<FontAwesomeIcon icon={faCameraWeb} />

如果要开发支持props传图标名的自定义按钮，可以维护图标名到图标对象的映射表，根据传入的props值匹配对应图标对象传入即可，示例：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCamera, faCameraWeb, IconDefinition } from '@fortawesome/free-solid-svg-icons'

// 维护图标映射表
const iconMap: Record<string, IconDefinition> = {
  'camera': faCamera,
  'camera-web': faCameraWeb
}

interface CustomButtonProps {
  iconName: string
  // 其余button属性
}

const CustomButton = ({ iconName, ...restProps }: CustomButtonProps) => {
  const targetIcon = iconMap[iconName]
  return (
    <button {...restProps}>
      {targetIcon && <FontAwesomeIcon icon={targetIcon} />}
    </button>
  )
}

// 使用组件
<CustomButton iconName="camera-web" />

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