通过使用 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>
)
}
参考资料
原文网址如下，转载敬请标明出处，谢谢。
https://kamaslau.wordpress.com/2023/04/07/implement-fontawesome-with-react-js-next-js/
