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

【问题标题】：How to render a FontAwesome icon from a json file into a React Application?如何将 json 文件中的 FontAwesome 图标渲染到 React 应用程序中？
【发布时间】：2020-07-15 10:15:53
【问题描述】：

晚上好，我有以下 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>

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

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

【问题讨论】：

你能控制那个 JSON 结构吗？你可以只保留图标的名称而不是完整的组件字符串吗？
是的，我愿意。我也尝试过，但是使用 React Fontawesome 图标，您通常必须将这些图标导入到您的组件中。这里的问题是，如果我只使用它不会呈现的图标名称。不知道为什么。

标签： html json reactjs parsing icons

【解决方案1】：

在您的 json 中为 icon 删除 quotes。

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

Working demo

代码 sn-p

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>
  );
}

【讨论】：

很遗憾，这不起作用。 json 从公用文件夹中使用。我正在为 React 使用 i18next 多语言。