如何在React项目中引入Font Awesome？求助解决引入无效问题

嘿，我瞅你已经执行了npm install --save react-fontawesome但图标还是没出来，这是因为你只装了React的封装层，还缺了Font Awesome的核心依赖和具体的图标包呀！别着急，按下面的步骤来就能搞定：

第一步：安装缺失的依赖 #

你需要额外安装Font Awesome的核心库以及你要使用的图标样式包（这里以免费的solid样式为例），在终端执行：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

如果之后想用regular或者品牌图标，再装对应的包就行，比如@fortawesome/free-regular-svg-icons或@fortawesome/free-brands-svg-icons。

第二步：修正组件中的代码 #

现在的react-fontawesome已经不再使用<FontAwesome>组件和name属性啦，得换成FontAwesomeIcon组件，还要导入具体的图标对象。正确的代码应该是这样的：

首先导入所需模块：

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

然后在组件的返回部分使用：

return (
  <FontAwesomeIcon
    icon={faRocket}
    className='super-crazy-colors'
    size='2x'
    spin
    style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
  />
);

简单说下变化：

• 用FontAwesomeIcon替代了原来的FontAwesome组件
• 不再用name='rocket'，而是通过icon={faRocket}传入我们导入的图标对象
• 其他的size、spin、className和style属性都可以正常保留使用

这样调整之后，你的火箭图标应该就能正常显示啦！

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