Set a custom cursor image with React styled components

user_11866037 0
Viewed 582

I am trying to set a custom cursor image when hovered on a specific element. I've tried putting my svg icon in src folder and call it in styled components as

const HStyles = styled.h3`
   cursor: url("images/pen-tool.svg");
 `;

But it doesn't change the cursor to pen image. I've also tried

 cursor: url('images/pen-tool.svg'),
  url('images/pen-tool.cur');

cursor: url('images/pen-tool.svg'),
  move;

My svg has a width and height defined in it's svg tag but still no work. Am I missing something here ? You can check my code sandbox sample here

svg css
1 Answers
const HStyles = styled.h3`
   cursor: url("images/pen-tool.svg");
 `;

Styled components is CSS-in-JS. Your can't write declarations like "images/pen-tool.svg" and have to call variable from import.

Just import images/pen-tool.svg and call it like:

import penTool from "./images/pen-tool.svg";

const HStyles = styled.h3`
  cursor: url(${HStyles}), auto;
`;

and don't forget "auto"

user_164807650
Related