React 15.6.0项目兼容图标库安装求助

方案1：使用FontAwesome纯CSS版（最稳妥） #

直接采用无需React组件的FontAwesome 4.7.0，完全兼容旧版本React：

• 安装命令：

  npm install font-awesome@4.7.0
  

• 引入样式：在项目入口文件（如src/index.js）添加：

  import 'font-awesome/css/font-awesome.min.css';
  

• 使用示例：

  <i className="fa fa-user" aria-hidden="true"></i>
  <i className="fa fa-cog" aria-hidden="true"></i>
  

方案2：使用兼容React 15的FontAwesome React组件 #

选择@fortawesome/react-fontawesome的0.1.x版本，搭配对应版本的核心库和图标包：

• 安装命令：

  npm install @fortawesome/react-fontawesome@0.1.14 @fortawesome/fontawesome-svg-core@1.2.36 @fortawesome/free-solid-svg-icons@5.15.4
  

• 使用示例：

  import React from 'react';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faCoffee, faEdit } from '@fortawesome/free-solid-svg-icons';
  
  const MyComponent = () => (
    <div>
      <FontAwesomeIcon icon={faCoffee} />
      <FontAwesomeIcon icon={faEdit} />
    </div>
  );
  
  export default MyComponent;
  

方案3：使用React Icons旧版本 #

React Icons的v3.x系列支持React 15，包含多种图标集：

• 安装命令：

  npm install react-icons@3.11.0
  

• 使用示例：

  import React from 'react';
  import FaGithub from 'react-icons/fa';
  import MdSettings from 'react-icons/md';
  
  const MyComponent = () => (
    <div>
      <FaGithub />
      <MdSettings />
    </div>
  );
  
  export default MyComponent;
  

注意事项 #

• 安装前可删除node_modules和package-lock.json，避免依赖冲突
• 安装后运行项目，若控制台出现报错，可微调对应包的版本号

内容的提问来源于stack exchange，提问作者Adria Aparicio Pons