动态样式组件标签名称

Question

我正在使用 styled-components with 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);

代码沙盒here.

动态样式组件标签名称

Dynamic styled-component tag name

javascript

reactjs

styled-components