从变量设置 fontawesome 图标 - 反应

Question

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

"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。我该怎么做？

Answer 1

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

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

Answer 2

我已将常量更改为：

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"/>

Answer 3

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

Answer 4

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" />
))}

从变量设置 fontawesome 图标 - 反应

Set fontawesome icon from a variable - react

reactjs

font-awesome

react-font-awesome