问题描述
"icons": [
{ "title": "Experience","icon": "faGem" },{ "title": "Courteous","icon": "faThumbs" }
]
我在我的代码中循环了这个,下面的代码不起作用,因为我需要 faGem 作为变量,而不是“faGem”作为字符串
{icons.map((val,i) => (
<li key={i} className={styles.icon}>
<FontAwesomeIcon icon={val.icon} />
<span className={styles.iconText}>{val.title}</span>
</li>
))}
我也尝试过 eval 和 JSON.parse 来转换字符串,但没有运气
有什么想法吗?
谢谢
解决方法
您可以尝试使用数组作为图标值:
"icons": [
{ "title": "Experience","icon": ['fas','faGem'] },...
]
然后:
<FontAwesomeIcon icon={val.icon} />
这是文档: https://fontawesome.com/how-to-use/on-the-web/using-with/react