集成FontAwesome到React.js/Next.js项目

通过使用 react-fontawesome 组件，可以 SVG+JS 的方式在 Next.js 项目中引入并使用Font Awesome 字体/图标。

引入依赖项

向项目引入Font Awesome的依赖项：

pnpm add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome

其中：

• @fortawesome/fontawesome-svg-core 是通过JavaScript操作SVG的基础模块
• @fortawesome/free-solid-svg-icons 和 @fortawesome/free-regular-svg-icons 是常规图标字体的SVG内容
• @fortawesome/free-brands-svg-icons 是商标/品牌字体的SVG内容（可选）
• @fortawesome/react-fontawesome 是React.js标准的组件模块

注册Next.js全局模块

借助Next.js的自定义布局功能，调整 /pages/_app.js 文件，加入Font Awesome样式和功能模块，以实现 Font Awesome 字体在项目中的全局可用性：

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

export default function MyApp({ Component, pageProps }) {
  return 
}

使用字体组件

在React.js文件中使用Font Awesome字体组件需要两个步骤：

• 引入 FontAwesomeIcon 组件
• 通过字体名称引入需要使用的字体内容
• 传递字体内容为 FontAwesomeIcon 组件的 icon 属性

以 GitHub 和 笑脸 图标为例：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFaceSmile } from '@fortawesome/free-solid-svg-icons' // solid风格
import { faGithub } from "@fortawesome/free-brands-svg-icons"; // （可选）品牌图标

export default function Home() {
  return (
    <div className="container">
      <main>
        <h1 className="title">
          <FontAwesomeIcon icon={faFaceSmile} />
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
        <p>
          <FontAwesomeIcon icon={faGithub} /> GitHub
        </p>
      </main>
    </div>
  )
}

参考资料

• Set Up with React
• Use React with Next.js

原文网址如下，转载敬请标明出处，谢谢。

https://kamaslau.wordpress.com/2023/04/07/implement-fontawesome-with-react-js-next-js/