1

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'
 }
General Grievance
  • 4,555
  • 31
  • 31
  • 45
Rajat Jain
  • 1,339
  • 2
  • 16
  • 29
  • You could add [preload link(s)](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) to the `` of your page – Reyno Nov 29 '21 at 10:30
  • @Reyno Actually this is big application adding it to parent head will not be feasible. I can do something in component but will not be accessible from component. – Rajat Jain Nov 29 '21 at 10:35

0 Answers0