reactjs - 使用没有图标名称标签的 react-icons

Question

我正在使用react-icons。

在文档中的正常用法是这样的：

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

但是我不能通过这种方式使用，因为图标名称来自道具。我需要这样使用：

<Icon name={props.icon} />

我该如何解决这个问题？

Answer 1

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

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

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

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