动态响应图标-拉图标

Question

我正在使用反应图标，它工作得很好，但是是否可以动态地从React循环中提取图标呢？例如，假设我有以下代码：

import { FaCodepen, FaLinkedinIn, FaGithub } from 'react-icons/fa'

[...]

const data = useStaticQuery(graphql`
  query SocialQuery {
    allContentfulSocial {
      edges {
        node {
          title
          link
          icon
        }
      }
    }
  }
`)

[...]

<div className="column is-half">
  <div className="level social-icons">
    {
      data.allContentfulSocial.edges.map((edge) => (
        <div className="level-item">
          <a
            href={edge.node.link}
            target="_blank"
            rel="noopener noreferrer"
            title={edge.node.title}
          >
            <FaCodepen /> // <-- is it possible to dynamically pull an icon here?
          </a>
        </div>
      ))
    }
  </div>
</div>

因此，在我的例子中，我有三个社交图标，即: CodePen、GitHub和LinkedIn。我正在考虑从上面的代码中做这样的事情：

<edge.node.icon />

但这不起作用，因为它抛出了一个错误。我以为他们的文档中会有一个用例，但我没有发现任何有用的东西。

以前会有人遇到过这个问题吗？感谢你的帮助！

注意:我在我的项目中使用GatsbyJS，这就是为什么上面有一个从我的内容CMS中提取的GraphQL查询。

Answer 1

您可以使用一个简单的键控对象来完成它：

const icons = {
  codepen: FaCodepen,
  linkedIn: FaLinkedIn,
  ...
}


const PostIcon = ({iconName}) => {
  const Icon = icons[iconName];
  return <Icon />
}