Next JS 中的 Font Awesome 6(测试版)和动态图标名称
Font Awesome 6 (beta) and dynamic icon name in Next JS
我正在用 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)} />
然后我收到此错误:“引用图标时仅支持字符串文字(此处使用字符串)”。
有人有什么想法吗?
下面的方法行得通吗?
var example = ['fab', 'google'];
<FontAwesomeIcon icon={example} />
P.S。建议在 ES6 中使用 let
或 const
关键字。
导入图标的方式使用了 babel 宏。这意味着在构建时必须知道引用的图标。它只是行不通,因为 Babel 无法确定应该导入什么图标,只能在运行时完成。这就是它告诉您仅支持字符串文字的原因。
所以你需要使用second method, explained in the docs。您必须在图标和数据库中的值之间建立某种映射,然后获取相关图标。像这样:
// 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
、explained here,然后执行与上述相同的操作,但使用字符串代替导入的图标,例如google: 'fa-brands fa-google'
(同样,不确定这里的确切值)。
我正在用 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)} />
然后我收到此错误:“引用图标时仅支持字符串文字(此处使用字符串)”。
有人有什么想法吗?
下面的方法行得通吗?
var example = ['fab', 'google'];
<FontAwesomeIcon icon={example} />
P.S。建议在 ES6 中使用 let
或 const
关键字。
导入图标的方式使用了 babel 宏。这意味着在构建时必须知道引用的图标。它只是行不通,因为 Babel 无法确定应该导入什么图标,只能在运行时完成。这就是它告诉您仅支持字符串文字的原因。
所以你需要使用second method, explained in the docs。您必须在图标和数据库中的值之间建立某种映射,然后获取相关图标。像这样:
// 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
、explained here,然后执行与上述相同的操作,但使用字符串代替导入的图标,例如google: 'fa-brands fa-google'
(同样,不确定这里的确切值)。