En mi aplicación, tengo diferentes cursores para diferentes elementos y los implementé como se describe aquí . Tengo muchos tipos diferentes de SVG de cursor definidos.
Después de que se carga la aplicación, las imágenes del cursor tardan en cargarse y guardarse en la memoria caché de la página web. Hasta ese momento no se muestra ningún cursor.
Cómo precargar SVG para un cursor personalizado en la aplicación React desde el componente en el archivo. Haga que la imagen se cargue en paralelo con la aplicación.
Muestra:
import myCursor from './icons/myCursor.svg'; export function getCursor(cursorType) { switch (cursorType) { case 'A': return `url("${myCursor }") 12 12, default`; default: return 'default' }