Can you use props as part of a selector in styled components? If so, how?

12 Views Asked by At

I'm styling an icon component that uses Font Awesome. Is there some way that I can use the props.icon as part of a selector?

For example, how would I use props.className or props.$icon here instead of '.fas.fa-plus' or 'fa-plus' in the code below?

const Icon = styled.div`
  .fas.fa-plus:after { 
    content: "";
  }
`;

const SomeComponent = ({icon}) => {

  return (
    <div>
      {some stuff}

      <Icon className={`fas ${icon}`} $icon={icon} />
    </div>
)}
0

There are 0 best solutions below