In my application I have different cursors for different elements and implemented it as described here. I have many different types of cursor SVGs defined.

After application loads, cursor images takes time to load and save in webpage cache. Till that time there is no cursor shown.

How to pre load SVG for custom cursor in React Application from component in the file. Make the image parallel load with application.

Sample:

import myCursor from './icons/myCursor.svg';

export function getCursor(cursorType) {
 switch (cursorType) {
   case 'A':
      return `url("${myCursor }") 12 12, default`;
   default:
      return 'default'
 }