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

Posted 2023-02-21

【中文标题】从变量中设置 fontawesome 图标 - 反应

【英文标题】：Set fontawesome icon from a variable - react

【发布时间】：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 中设置值。我该怎么做？

【参考方案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"/>