Optimizar carga de íconos

[benjavicente]

No hay forma oficial en Next para cargar los íconos de Google (discussion al respecto). Lo ideal es que exista un mecanismo que precargue la fuente sin tener cascada. Es decir, que no pase conectar a servidor google → obtener css → obtener fuente, y se haga solo obtener fuente (cargando el css que la usa en paralelo).

Ese no es el mayor problema eso si. La fuente se demora mucho en cargar por primera vez, como segundo y medio. La fuente que se descarga pesa 3Mb. Demás se pueda optimizar reduciendo el tamaño de carga, entregando manualmente los íconos que se podrían usar en la app.

Por lo que tengo entendido, los íconos de google font tienen el parámetro icon_names para cargar solo los iconos usados.

---

Aquí va una propuesta, pseudocódigo, no he confirmado que funcione:

const iconNames = [
  "close",
  "open",
]

export const LoadGoogleIcons() {
    const iconsUrl = new URL("https://fonts.googleapis.com/css2")
    iconsUrl.searchparams.add("family", "Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200")
    iconsUrl.searchparams.add("icon_names", iconNames.join(","))  // Aquí está la optimización principal
    return <link src={iconsUrl.toString()} />
    // alternativamente, usar esta api nueva de react que permite optimizar aún más la carga de css externo
    // optimizar en el sentido que puede indicarle antes al navegador que debe descargar el archivo
    // https://react.dev/reference/react-dom/preinit
    preinit(iconsUrl.toString(), { as: "stylesheet", precedence: "high" })
}

// Esto es más para garantizar que solo se usen los iconos cargados
export const Icon({ className, iconName }: { className: string, iconName: (typeof iconNames)[number] }) {
   return <span className={`material-icon ${className}`}>{iconName}</span>
}