从变量- react中设置方框图标

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，我想在循环中设置这些图标名：

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

'@fortawesome/free-brands-svg-icons'中包含所有图标的FontAwesome已经导出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" />
))}

Answer 2

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

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

Answer 3

如果Brand_icons是一个数组，并且您正在循环技巧，则道具图标应该等于: icon=Brand_iconsskill。