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

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