通用样式的组件图标

Question

我正在使用 styled-components 为我的 React 组件设置样式。我想要一个图标组件，只需更改大小、颜色道具等即可在不同地方使用。我还想将图标名称作为道具传递给不同地方。我成功更改了大小和颜色，但不知道如何按要求传递图标名称。

这是我的通用图标组件：

     import React from "react";
        import { ReactSVG } from "react-svg";
        import styled, { css } from "styled-components";
        import { FaUserTie } from 'react-icons/fa';
        
                
        const StyledSVGIcon = styled(FaUserTie)`
          svg {
            fill: black;
            ${({ size }) =>
                size &&
                css`
                width: ${size};
                height: ${size};
              `}
            ${({ transform }) =>
                transform &&
                css`
                transform: ${transform};
              `}
            path {
              ${({ color }) =>
                color &&
                css`
                  fill: ${color};
                `}
            }
          }
        `;
        
        const GenIcon = props => {
            return (
                <StyledSVGIcon
                    src={`/icons/${props.name}.svg`}
                    color={props.color}
                    size={props.size}
                    transform={props.transform}
                />
            );
        };
    
    export default GenIcon;

我想这样使用它：

 <GenIcon
          name="FaUserNurse"
          color="red"
          size="16px"
      />

但是 GenIcon 组件不工作。请帮助我哪里做错了。图标可以是任何类型，例如 svg 或任何其他 React 图标库。

Answer 1

试试这个，你很接近：

import React from "react";
import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import { FaUserTie, FaDocker } from "react-icons/fa";

const IconStyler = styled.span`
 color: ${(props) => props.color};
 & svg {
  ${(props) =>
   props.small &&
    css`
     width: 14px !important;
     height: 14px !important;
   `}
 ${(props) =>
  props.med &&
  css`
    width: 20px !important;
    height: 20px !important;
  `}
 ${(props) =>
  props.large &&
  css`
    width: 28px !important;
    height: 28px !important;
  `}
 }

`;

  const Icon = ({ children, ...props }) => {
   return <IconStyler {...props}>{children}</IconStyler>;
  };

const GenIcon = () => {
  return (
   <div>
     <h5>Any Icon</h5>
      <div>
       <Icon color="blue" small>
        <FaUserTie />
       </Icon>
      </div>
      <div>
        <Icon color="orange" large>
        <FaDocker />
        </Icon>
      </div>
   </div>
  );
};

export default GenIcon;

这是一个沙盒 link：https://codesandbox.io/s/flamboyant-allen-60ho1?file=/src/GenIcon.js

通用样式的组件图标

Generic styled component Icon

javascript

reactjs

styled-components