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.