Next JS 中的 Font Awesome Icon 仅适用于单个 Component/Variation

Question

我已经通过使用导入语句然后利用导入的组件获得了要导入的图标，但是，许多图标的行为类似于 classes，如果您想要图标的变体，则需要添加到 class。我无法使用预定义组件执行此操作，当我在引号中定义 icon = "" 而不是导入组件时，它不起作用。

例如，当我访问该网站时，它会为我提供以下 React 代码：

<FontAwesomeIcon icon="fa-solid fa-bold" />

我的代码：

import { faSolid, faBold } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

...

//Works
<FontAwesomeIcon icon={faBold} />

//Doesn't work
<FontAwesomeIcon icon="fa-solid fa-bold" />
<FontAwesomeIcon icon={{faBold, faSolid}} />

我还应该提一下，我遵循了博客上的一个小教程并将这段代码添加到我的 pages/_app.js 文件中：

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

Answer 1

这取决于您如何导入包。建议新用户执行有效的操作：

import { faSolid, faBold } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

...

//Works
<FontAwesomeIcon icon={faBold} />

//faSolid doesnt exist.

如果你真的想用另一种方式来做，只是为了让你知道它有很多缺点，你需要导入包globally 到您的网站。同样，如果您只是学习该软件包，我不会推荐它。单独导入非常容易，如果您知道要导入的图标的名称，那么您可以输入

import {faThumbsUp} from '@fortawesome/free-regular-svg-icons'

诀窍是当你去 fontawesome 时你选择你的图标然后在左上角你可以从哪个库中选择 solid，thin 等，这就是包的名称。

// regular
@fortawesome/free-regular-svg-icons

// solid
@fortawesome/free-solid-svg-icons

他们都是一样保存的

faThumbsUp 
faAlien
faThumbtack
// etc...

Next JS 中的 Font Awesome Icon 仅适用于单个 Component/Variation

Font Awesome Icon in Next JS works with single Component/Variation only

font-awesome

reactjs

next.js