从变量中设置 fontawesome 图标 - 反应答案

【问题标题】：Set fontawesome icon from a variable - react从变量中设置 fontawesome 图标 - 反应
【发布时间】：2021-11-27 04:50:21
【问题描述】：

我正在构建一个反应应用程序：

"react": "^16.0.0",

集成了很棒的字体。

"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",

在一个组件中，我想从另一个 JSON 文件中的 const 设置一个图标，但没有变量它看起来像这样：

<FontAwesomeIcon icon={Brand_icons.faJava} size="6x" transform="shrink-6"/>

我已经导入了 FontAwesomeIcon 和其他类似的库：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as Brand_icons from '@fortawesome/free-brands-svg-icons';

这是我的常量，我想循环设置这些图标名称：

const skills = [
  "faJava",
  "faPython",
  "faJsSquare",
  "faReact",
  "faPhp"
];

这是我用来获取这些图标的循环：

{skills.map((skill, index) => (
  <div>
    <FontAwesomeIcon icon={Brand_icons.faJava} size="6x" transform="shrink-6"/>
  </div>
))}

我想从技能变量而不是 faJava 中设置值。我该怎么做？

【问题讨论】：

标签： reactjs font-awesome react-font-awesome

【解决方案1】：

FontAwesome 已经从包含所有图标的 '@fortawesome/free-brands-svg-icons' 导出 fab。

您可以像这样更改导入：

import { fab as brandIcons } from '@fortawesome/free-brands-svg-icons';

然后像这样改变渲染：

{skills.map(skill => (
        <FontAwesomeIcon key={skill} icon={brandIcons[skill]} size="6x" transform="shrink-6" />
))}

【讨论】：

【解决方案2】：

您可以在 js 中使用模板文字来完成上述任务。

{skills.map((skill, index) => (
  <div>
    <FontAwesomeIcon icon={`${Brand_icons}.${skill}`} size="6x" transform="shrink-6"/>
  </div>
))}

【讨论】：

现在图标不显示了。打印时，错误是找不到图标

【解决方案3】：

如果 Brand_icons 是一个数组并且您正在循环技能，则道具图标应等于：icon=Brand_icons[skill]

【讨论】：

Brand_icons 是一个模块，使用它返回一个对象，而不是字体图标

【解决方案4】：

我已将我的 const 更改为：

const skills = [
  Brand_icons.faJava,
  Brand_icons.faPython,
  Brand_icons.faJsSquare,
  Brand_icons.faHtml5,
  Brand_icons.faCss3Alt,
  Brand_icons.faPhp,
];

然后调用变量：

<FontAwesomeIcon icon={skill} size="6x" transform="shrink-6"/>

【讨论】：