时间戳

首页 > 解决方案 > 如何将 json 文件中的 FontAwesome 图标渲染到 React 应用程序中？

html - 如何将 json 文件中的 FontAwesome 图标渲染到 React 应用程序中？

问题描述

晚上好，我有以下 JSON 结构：

"Flow": [
    {
        "title": "Is your multicloud secure and scalable?",
        "icon": "<FontAwesomeIcon className='my-icon' icon={faShieldCheck} />"
    }
],

如您所见，它使用了 React 版本的 FontAwesome Pro。但是我需要将它动态呈现到一个组件中。

到目前为止，我已经尝试过不同的方法。例如：

<div dangerouslySetInnerHTML={ { __html: item.icon } }></div>

也试过这个：

<div> { ReactHtmlParser(item.icon) }  </div>

但到目前为止还没有运气。

我将不胜感激有关此事的任何新想法。提前致谢。

标签： htmljsonreactjsparsingicons

解决方案

删除quotesjson 中的icon.

其实只需要在 json 中提供图标的名称，require用于导入iconwhile 渲染即可FontAwesomeIcon。

工作演示

代码片段

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const myJson = {
  Flow: [
    {
      title: "Is your multicloud secure and scalable?",
      icon: "faHighlighter"
    }
  ]
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <FontAwesomeIcon
        className="my-icon"
        icon={require("@fortawesome/free-solid-svg-icons")[myJson.Flow[0].icon]}
      />
    </div>
  );
}

注意- 下面是更简洁的代码，但它会预先导入所有图标。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const icons = require("@fortawesome/free-solid-svg-icons");
const myJson = {
  Flow: [
    {
      title: "Is your multicloud secure and scalable?",
      icon: "faHighlighter"
    }
  ]
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <FontAwesomeIcon className="my-icon" icon={icons[myJson.Flow[0].icon]} />
    </div>
  );
}

推荐阅读