使用不带图标名称标记的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]}</>