0

I'm using react-icons.

In documentation normal usage like this:

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

But I can't use by this way because icon names comes from props. I need to use like this:

<Icon name={props.icon} />

How can i solve this ?

mehmetdemiray
  • 976
  • 4
  • 13
  • 32

1 Answers1

1

You should implement a wrapper, for example:

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

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

const Icon = ({name}) => <>{ICONS[name]}</>
Dennis Vash
  • 50,196
  • 9
  • 100
  • 118