Question

0

118

Views

Generic styled component Icon

I am styling my react component with styled-components. I want an icon component that can be used in different places just by changing size, colour props etc. I also want to pass icons names as props for different places. I am succeeded to change the size and colour but don't know how to pass the icon name as per requirement.

Here is my generic icon component:

     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;

And I want to use it like this:

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

But the GenIcon component is not working. please help me where I am doing wrong. the icon could be any kind like svg or any other react icon library.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-04T07:14:44.724Z

Try this out, you're close:

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;

Here's a sandbox link: https://codesandbox.io/s/flamboyant-allen-60ho1?file=/src/GenIcon.js

0

118

Generic styled component Icon

1 answers

0

Find remote jobs

Andres GPT