FontAwesome 图标在反应/下一个应用程序中无法正常工作

Question

已解决 - TLDR；添加import '@fortawesome/fontawesome-svg-core/styles.css'到 _app.js / index.js 文件修复了该问题，并且 FontAwesome 按预期工作。我的问题是由于npx-create-next-app默认包含 purgeCSS 引起的，这反过来又删除了 FontAwesome 所需的样式。

---

我在我的 Next 应用程序中使用 FontAwesome。我按照FA 网站上的React 指南进行操作，图标 SVG 正在页面上输出。问题是，这些功能都不起作用，并且它们不能按照预期的方式随字体大小缩放。

我不想通过手动定位 SVG 并添加大小等方式将其组合在一起，因为它在响应能力方面并不理想。即，如果图标能够与随附的文本一起缩放，并且能够添加“旋转器”、“固定宽度”等，那就太好了。

奇怪的是，他们已经开始工作一两次，但后来又坏了，我似乎无法重现。

// package.json
"dependencies": {
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/pro-regular-svg-icons": "^5.15.2",
  }

// _app.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { faHeart } from '@fortawesome/pro-regular-svg-icons'
library.add( faHeart )

// header.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function Header() {

  return (
    <header>
      <FontAwesomeIcon icon={['far', 'heart']} spin />
    </header>
  )
}

// style.css
header {
 font-size: 20px; (does nothing to the icon)
}

svg {
 width: 20px; (works, but this shouldn't be required according to FA docs)
}

我也尝试过单独使用（将图标导入到单独的组件中，而不是利用库函数）达到相同的效果。就像这样：

// header.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/pro-regular-svg-icons'

export default function Header() {

  return (
    <header>
      <FontAwesomeIcon icon={faHeart} spin />
    </header>
  )
}

Answer 1

修复。问题是 purgeCSS，它在使用npx-create-next-app. purgeCSS 正在清除所需的 FontAwesome 样式。

显式导入 FontAwesome 样式解决了该问题。

具体来说，我添加import '@fortawesome/fontawesome-svg-core/styles.css'到 _app.js。

Answer 2

根据文档，react-fontawesome 组件与 Next.js 集成得很好，但有一个问题需要解决。由于 Next.js 以不同的方式管理 CSS

在您的项目条目中，可能是 App.js

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

Next.js 允许您直接在 .js 文件中导入 CSS。它处理优化和所有必要的 Webpack 配置以使其正常工作。

import '@fortawesome/fontawesome-svg-core/styles.css'

您可以将此配置值更改为 false，以便 Font Awesome 核心 SVG 库不会尝试将元素插入页面。Next.js 无论如何都会阻止这种情况发生，所以你最好不要尝试。

config.autoAddCss = false