Next.js中FontAwesomeIcon无法传入多图标参数问题求助

错误原因 #

你之前的写法<FontAwesomeIcon icon={faTableCells, faSharp, faRegular} />是错误的——FontAwesomeIcon的icon属性仅接受单个图标对象，不能直接将样式前缀（faSharp/faRegular）与图标用逗号拼接，这会触发语法错误。

正确实现步骤 #

要获取无圆角的表格单元格图标（Sharp风格），需按以下方式操作：

1. 安装对应样式的FontAwesome包
   如果未安装Sharp系列图标包，先执行安装命令：

   npm install @fortawesome/sharp-regular-svg-icons
   # 或 yarn add @fortawesome/sharp-regular-svg-icons
   # 或 pnpm add @fortawesome/sharp-regular-svg-icons
   

2. 导入正确的图标组件与目标图标

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
   // 从Sharp Regular包中导入无圆角的表格单元格图标
   import { faTableCells } from '@fortawesome/sharp-regular-svg-icons';
   

3. 正常使用组件

   <FontAwesomeIcon icon={faTableCells} />
   

补充说明 #

• 若需要Regular风格（非Sharp）的图标，直接从@fortawesome/free-regular-svg-icons导入即可，无需额外指定前缀参数。
• 所有样式变体（Solid/Regular/Sharp等）的图标都需要从对应的包中导入，不能通过在icon属性中拼接前缀的方式切换。

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