Iconos svg crecen demasiado durante la carga. Estoy migrando de font Awesome a svg, todo bien con modificarle los colores, tamaños y demá...

Silvana Ramos

Silvana Ramos

Pregunta
student
hace 5 años

Iconos svg crecen demasiado durante la carga. Estoy migrando de font Awesome a svg, todo bien con modificarle los colores, tamaños y demás, cuando es inline. Pero también tengo iconos compartidos que varían de estilo, y en Firefox sobre todo durante la carga de la web se vuelven gigantescos hasta que termina de cargan y obtienen los estilos que quiero, alguien sabe cómo corregir eso o si talvez es tema del navegador? iconos gigantes

se incluyen de la sgte manera:

<span> <svg viewBox="0 0 1792 1792" ><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/> </svg> </span>

Intenté cargar un svg personalizado de 20x20px pero el problema persiste

2 respuestas
    Juan Manuel Velez

    Juan Manuel Velez

    student
    hace 5 años

    buenas silvana yo puedo ayudarte si te fijas en el svg, pone viewBox=" 0 0 1792 1792", eso quiere decir que tu svg tendra un temaño de 1792 pixeles de alto y ancho

    viewBox = min-x, min-y, width, height

    si modificas esos valores a 300 300 tendrias un svg mucho mas pequeño.

    Toma te dejo el link a ladocumentación de mozzila

    Silvana Ramos

    Silvana Ramos

    student
    hace 5 años

    Gracias por tu respuesta, en realidad también modifiqué el viewbox y no cambiaba en nada, lo solucioné aplicando sizes al span y agregando estilos inline via props ya que es compartido.

Curso de Optimización Web

Curso de Optimización Web

Optimiza sitios web con técnicas avanzadas de optimización, incluyendo Server-side Rendering y Static Site Generation. Aprende a utilizar herramientas como Netlify y GitHub Actions para automatizar despliegues y auditorías de rendimiento.

Curso de Optimización Web
Curso de Optimización Web

Curso de Optimización Web

Optimiza sitios web con técnicas avanzadas de optimización, incluyendo Server-side Rendering y Static Site Generation. Aprende a utilizar herramientas como Netlify y GitHub Actions para automatizar despliegues y auditorías de rendimiento.