React（Vite）使用Font Awesome报错：FontAwesomeIcon未定义

原因分析 #

你在组件里直接使用<FontAwesomeIcon>，但这个React组件既没有全局注册，也没有在组件内导入，所以控制台抛出未定义错误。虽然你在index.html中添加了Font Awesome工具包脚本，但它仅提供原生HTML的图标使用方式，不会自动提供React组件。

两种可行解决方案 #

方案一：直接用原生HTML标签（无需React组件） #

既然已经在index.html里引入了工具包，直接用<i>标签就能渲染图标，不用依赖FontAwesomeIcon组件：

import React from "react";
function Skills() {
  return (
    <>
      <section className="skills">
        <div className="card">
          <div className="content">
            <i className="fa-brands fa-html5"></i>
          </div>
        </div>
      </section>
    </>
  );
}

export default Skills;

方案二：安装并使用Font Awesome React组件（推荐） #

如果想继续用<FontAwesomeIcon>组件，需要安装对应的React库并正确导入：

1. 安装依赖
   在项目根目录执行命令：

npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons

2. 修改Skills组件代码

import React from "react";
// 导入FontAwesomeIcon组件和需要的图标
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHtml5 } from "@fortawesome/free-brands-svg-icons";

function Skills() {
  return (
    <>
      <section className="skills">
        <div className="card">
          <div className="content">
            <FontAwesomeIcon icon={faHtml5} />
          </div>
        </div>
      </section>
    </>
  );
}

export default Skills;

如果偏好使用字符串格式的图标名（比如icon="fa-brands fa-html5"），可以先在main.js里把图标添加到全局库：

import { library } from '@fortawesome/fontawesome-svg-core';
import { faHtml5 } from '@fortawesome/free-brands-svg-icons';

// 添加需要的图标到库
library.add(faHtml5);

之后在Skills组件里只需要导入FontAwesomeIcon，就能用字符串格式调用图标了。

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