Javascript 在React.js中按字符串数组导入图标

在我的React.js项目中，我有一个边栏元素数组，其中每个元素都表示为object，其中有自己的图标定义为string，比如fa phone。现在FontAwesome与React.js的集成出现了问题；每个图标都必须根据其各自的特性单独导入并添加到库中

---

但上述解决方案显然行不通，因为导入必须在顶层进行，并且不会从变量中获取组件名称。有没有其他方法可以在一开始就不知道图标的情况下导入图标？还是我必须在定义侧边栏元素的同一点导入所有图标？

我在一个我正在构建的个人项目中也遇到了同样的问题。我发现的第一个问题与如何从查询中动态呈现图标有关？ 主应用程序容器：

此外，我的图标是免费品牌版本的一部分，因此将它们导入到库中

因此，我做的第一件事是导入库并在我的子组件上创建一对空变量，一个用于前缀，另一个用于图标本身：

在我的项目中，我正在使用来自API端点的数据，为获取信息而构建的查询如下所示：

理论上，所有设置都是为了映射数组，并按照我们通常的方式渲染每个项目：

<FontAwesomeIcon
   icon={[
      (faprefix = document.node.prefix),
      (faicon = document.node.icon),
    ]}
   size="lg"
 />

但是子组件没有呈现任何内容。为什么会这样？因为document.node.prefix和document.node.icon都返回字符串，所以当组件映射数组中的数据时，它结束了如下的渲染尝试：

<svg data-prefix="'fab'" data-icon="'github'" >

请注意环绕字符串的单引号

我的解决方案是使用regex替换方法来删除包装引号标记：

<FontAwesomeIcon
   icon={[
      (faprefix = document.node.prefix.replace(/'/g, "")),
      (faicon = document.node.icon.replace(/'/g, "")),
   ]}
   size="lg"
/>

子页脚组件

---

现在，我的图标正在从端点的数据进行渲染。我希望这有助于解决您的问题。

是的，您必须在顶层导入它们。但是为什么不使用普通的importviascript标记呢？这听起来很麻烦。FWIW，我试着通过npm安装使用FontAwesome，最后懒散地列出了我需要的所有图标，我只是添加了适当的图标。如果没有其他方法，我正在考虑这样做，但是使用FontAwesome的集成有什么价值呢？我认为这比脚本标记导入有一些优势，但遗憾的是，它似乎是另一种方式…你能发布虚拟文档对象吗？

<svg data-prefix="'fab'" data-icon="'github'" >

<FontAwesomeIcon
   icon={[
      (faprefix = document.node.prefix.replace(/'/g, "")),
      (faicon = document.node.icon.replace(/'/g, "")),
   ]}
   size="lg"
/>

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import containerStyles from "../pages/styles.module.less"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

let faicon = null
let faprefix = null
const Navigation = ({ data }) => (
  <StaticQuery
    query={graphql`
      query FooterTemplate {
        allStrapiLink {
          edges {
            node {
              id
              icon
              url
              prefix
            }
          }
        }
      }
    `}
    render={data => (
      <>
        <footer>
          <p>Freddy Polanía {new Date().getFullYear()}</p>
          <div className={containerStyles.links}>
            {data.allStrapiLink.edges.map(document => (
              <div key={document.node.id}>
                <a
                  href={document.node.url}
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  <FontAwesomeIcon
                    icon={[
                      (faprefix = document.node.prefix.replace(/'/g, "")),
                      (faicon = document.node.icon.replace(/'/g, "")),
                    ]}
                    size="lg"
                  />
                </a>
              </div>
            ))}
          </div>
        </footer>
      </>
    )}
  />
)

export default Navigation