React Icons - 动态拉图标

Question

我正在使用React Icons，它工作得很好，但是是否可以动态地从 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，这就是为什么上面有一个 GraphQL 查询从我的 Contentful CMS 中提取的原因。

Answer 1

你可以用一个简单的键控对象来做到这一点：

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


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