React项目本地托管Font Awesome Pro图标及组件复用疑问

核心结论 #

完全可以继续使用FontAwesomeIcon组件，无需替换，只需调整依赖引入和图标调用方式即可。

具体步骤 #

1. 卸载原有的Pro图标包依赖
   之前通过npm安装的Pro图标包不再需要，执行以下命令卸载：

   npm uninstall @fortawesome/pro-solid-svg-icons @fortawesome/pro-duotone-svg-icons
   

   注：@fortawesome/react-fontawesome组件包可以保留，它能配合本地托管的Font Awesome核心库正常工作。

2. 在项目入口引入本地Font Awesome资源
   在项目入口文件（如src/index.js或src/main.jsx）中，导入本地托管的Font Awesome核心JS及所需样式的JS文件，路径根据你存放的fontawesome-pro-6.0.0-web文件夹位置调整：

   // 导入Font Awesome核心库
   import './assets/fontawesome-pro-6.0.0-web/js/fontawesome';
   // 导入需要用到的图标样式组（按需导入）
   import './assets/fontawesome-pro-6.0.0-web/js/solid';
   import './assets/fontawesome-pro-6.0.0-web/js/duotone';
   // 若需其他样式（如regular、light），可继续添加对应js文件的导入
   

3. 修改图标调用方式
   不再从npm包中导入单个图标，而是改用样式前缀+图标名称的字符串数组形式调用：

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
   
   // 原faLongArrowDown改为['solid', 'long-arrow-down']
   <FontAwesomeIcon
       icon={['solid', 'long-arrow-down']}
       className={'download-arrow semi'}
   />
   
   // 原faPrintSlash改为['duotone', 'print-slash']
   <FontAwesomeIcon
       icon={['duotone', 'print-slash']}
       className={'your-custom-class'}
   />
   

注意事项 #

• 确保本地资源的路径正确，若项目使用了webpack等构建工具，需确认assets目录已被正确识别。
• Duotone图标的自定义样式（如透明度调整）用法与之前一致，可通过data-duotone-opacity属性或CSS变量实现。

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