动态样式-组件标记名

Question

我将造型-部件与样式图标结合使用。我有：

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 这里.