Вызов компонента через опору в ReactJS

Question

Я создаю компонент-оболочку для значков, которые я импортирую, используя react-icons, Вот пример того, как это выглядит прямо сейчас:

import { FaTwitter as Twitter} from 'react-icons/fa'
import { Icon } from './elements 

<Icon>
 <Twitter />
<Icon>

Теперь, это работает так, как я хочу - но я хотел бы упростить код. В идеале я бы хотел, чтобы это выглядело / работало так:

<Icon name='twitter' />

есть идеи как это сделать?

---

ПРИМЕЧАНИЕ: в случае, если это помогает, вот текущий код для моего Icon составная часть:

export const Icon = props => <IconBase {...props} />

<IconBase> компонент только некоторые стили из styled-components,

---

ОБНОВИТЬ

Я просто хочу отметить, что пример Twitter - это просто пример. Я ищу решение, которое будет работать независимо от того, какое имя я передаю <Icon> составная часть. Итак, другими словами, все следующее (и более) будет работать:

<Icon name="Facebook" />
<Icon name="Search" />
<Icon name="Menu" />

Каждый из них будет эквивалентен:

<Icon><Facebook /></Icon>
<Icon><Search /></Icon>
<Icon><Menu /></Icon>

Другими словами, независимо от того, какую иконку я вытащил из react-icons, он будет отображаться правильно по отношению к name двигательный

Answer 1

Как насчет этого?

// definition:
const Icon = (props) => <SomeIconWrapper><props.glyph /></SomeIconWrapper>;
// usage:
<Icon glyph={Twitter} />

Это супер просто и гибко, не нужно никакого словаря или около того.

Answer 2

Я думаю, что-то подобное удовлетворит ваше состояние.

const App = () => <Icon name="twitter" />;

const dict = { twitter: <Twitter /> };

const Icon = ({ name }) => <IconBase>{dict[name]}</IconBase>;