Динамическое имя тега стилевого компонента

Question

Я использую styleled-компоненты с styled-icons . У меня есть:

import { Facebook } from 'styled-icons/feather/Facebook'
import { Twitter } from 'styled-icons/feather/Twitter'
import { Instagram } from 'styled-icons/feather/Instagram'

...

const FacebookIcon = styled(Facebook)`
  width: 10px;
  color: black;
`

const TwitterIcon = styled(Twitter)`
  width: 10px;
  color: black;
`

const InstagramIcon = styled(Instagram)`
  width: 10px;
  color: black;
`

...

render () {
  return (
    <Fragment>
      <FacebookIcon />
      <TwitterIcon />
      <InstagramIcon />
    </Fragment>
  )
}

Какой хороший способ высушить этот код?

Так что я могу использовать такие значки, как: <Icon name='Facebook' /> или же { renderIcon(Facebook) }

Answer 1

Вы можете сделать это:

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { Facebook } from "styled-icons/feather/Facebook";

const IconWrapper = styled.div`
  width: 10px;
  color: black;
`;

const App = () => {
  return (
    <React.Fragment>
      <IconWrapper>
        <Facebook />
      </IconWrapper>
    </React.Fragment>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox здесь .