Question

我将styled-components与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 here。

动态样式化组件标签名称

1 个答案: