微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

React Font Awsome 从 JSON 导入字体变量名称

如何解决React Font Awsome 从 JSON 导入字体变量名称

我有一个我导入的 JSON 文件,它的一部分看起来像这样

"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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。