0

I have been given the task of changing the cursor to a FontAwsome icon. After doing some research I know that you can pass a .png file to the cursor style like this:

<Component
 style={{ cursor: 'url(images/special.png),auto' }}
/>

But what I would like to do is something like this (in pseudo code):

<Component
 style={{ cursor: <FontAwesomeIcon icon={faAngleDown} size="md" /> }}
/>

Is there a way to do this or is a viable workaround to get the svg of the icon from FontAwesome and convert is to a .png and store that file as a graphic asset?

halfer
  • 19,824
  • 17
  • 99
  • 186
Mr. Robot
  • 1,334
  • 6
  • 27
  • 79
  • 1
    use CSS for that : https://stackoverflow.com/questions/10866471/javascript-how-to-change-mouse-cursor-to-an-image – Ji aSH Aug 05 '20 at 07:59
  • Thanks - as my question says, I don't want to make the cursor an image, I want to make the cursor a React component. – Mr. Robot Aug 05 '20 at 08:52
  • have a look at this https://medium.com/@benzbraunstein/how-to-make-custom-css-cursors-using-react-fd1a5cca9400 – Chandradeepta Laha Aug 05 '20 at 08:55

0 Answers0