Использование значков реакции без тега имени значка

Question

Я использую иконки реакции.

В документации обычное использование:

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]}</>