Font Awesome 6（测试版）和 Next JS 中的动态图标名称

Question

我正在使用 Next JS 开发一个网站。这是我第一次使用这种语言，我还有很多东西要学。

现在，我有 Font Awesome 的专业版订阅，我希望直接在我的项目中使用他们的组件，如他们的指南中所述。

https://fontawesome.com/v6.0/docs/web/use-with/react/

https://fontawesome.com/v6.0/docs/web/use-with/react/add-icons

基本上，只需使用这样的组件：

<FontAwesomeIcon icon={brands("google")} />

有用。

我无法解决的问题是如何在先前初始化的变量中动态设置“google”值。我需要它，因为这些值是动态来自数据库的。

如果我尝试：

var example = "google";
<FontAwesomeIcon icon={brands(example)} />

然后我收到此错误：“引用图标时仅支持字符串文字（此处改为使用字符串）”。

有人有主意吗？

Answer 1

导入图标的方式使用 babel 宏。这意味着引用的图标必须在构建时已知。它只是行不通，因为 Babel 无法弄清楚应该导入什么图标，它只能在运行时完成。这就是为什么它告诉您仅支持字符串文字。

因此，您需要使用文档中解释的第二种方法。您必须在图标和数据库中的值之间有某种映射，然后获取相关的图标。像这样的东西：

// not sure about exact import
import { faGoogle } from '@fortawesome/free-brand-svg-icons';

// you'd put all valid values that can come from the backend here
const myIcons = {
  google: faGoogle
}

// ...

const example = 'google';
<FontAwesomeIcon icon={myIcons[example]} />

另一个选项是使用library.add,此处解释，然后执行与上面相同的操作，但使用字符串代替导入的图标，例如google: 'fa-brands fa-google'（同样，不确定此处的确切值）。