CODEWITHSUNDEEP
javascriptcssreactjssvgemotion
DSCH
DSCH

Reputation: 2386

emotion/styled - Hover on an SVG component

I have a a component which is an SVG with only on path element in it. It is being imported and rendered as:

<svg ... >
 <path>...</path>
</svg>

I am trying to style it with emotion/styled:

const StyledSvg = stlyled(SvgIcon)`
   &:hover {
     fill: <someColor>
   }
`;

And it does nothing. Tried to force the hover on the inspector and still nothing. Any idea if it's possible and how can I achieve that?

Thanks

EDIT The component:

const Play: Icon = ({ style }) => {
  return (
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="20" viewBox="0 0 30 20">
        <path d="..."/>
      </svg>
  );
};

Upvotes: 2

Views: 3899

Answers (1)

bas
bas

Reputation: 15462

I don't know what your Icon type looks like, but I got it to work like this:

type ComponentProps = {
  className?: string;
};

const Play: React.FC<ComponentProps> = ({ className }) => (
  <svg
    className={className}
    xmlns="http://www.w3.org/2000/svg"
    width="30"
    height="20"
    viewBox="0 0 30 20">
    <path d="M 10 10 H 90 V 90 H 10 L 10 10" /> // replace with your path
  </svg>
);

const StyledSvg = styled(Play)`
  &:hover {
    fill: blue;
  }
`;

function App() {
  return (
    <div className="App">
      <StyledSvg />
    </div>
  );
}

This solution needs the className prop set for it to work.

Upvotes: 2

Related Questions