Reactjs 使用不带图标名称标签的react图标

我正在使用

在文档中，通常的用法如下：

import { FaBeer } from 'react-icons/fa';
<FaBeer />

<Icon name={props.icon} />

但我不能这样使用，因为图标名称来自道具。我需要这样使用：

import { FaBeer } from 'react-icons/fa';
<FaBeer />

<Icon name={props.icon} />

---

如何解决这个问题？

您应该实现一个包装器，例如：

import { FaBeer, FaAdobe, ICON_NAME } from 'react-icons/fa';

const ICONS = {
  [ICON_NAME.FaBeer]: <FaBeer/>,
  [ICON_NAME.FaAdobe]: <FaAdobe/>
}

const Icon = ({name}) => <>{ICONS[name]}</>

---

如何实现包装器？有什么例子吗@丹尼斯瓦什