El Problema del JavaScript Innecesario

En la era de las Single Page Applications, muchos desarrolladores han caído en la trampa de usar librerías JavaScript pesadas para algo tan simple como mostrar iconos. React Icons, Font Awesome con JS, Heroicons con hidratación... todas estas soluciones añaden kilobytes de JavaScript que el navegador debe parsear, compilar y ejecutar.

El resultado: páginas que tardan más en cargar, puntuaciones de Core Web Vitals más bajas, y peor experiencia de usuario especialmente en dispositivos móviles. Todo esto para mostrar... ¿iconos estáticos?

La alternativa es sorprendentemente simple: SVG incrustado directamente en el HTML. Sin JavaScript. Sin hidratación. Sin dependencias de runtime. Los iconos se renderizan instantáneamente con el primer byte de HTML, y las animaciones se consiguen con CSS puro, aprovechando la aceleración por hardware del navegador.

¿Por qué SVG Estático es Superior?

Velocidad Extrema

Los SVG se renderizan en el primer paint. No esperan a que JavaScript cargue o se ejecute.

SEO Perfecto

Los crawlers ven el contenido completo sin ejecutar JS. Mejor indexación garantizada.

Menor Consumo

Sin JavaScript = menos CPU = mayor duración de batería en móviles.

Más Accesible

Funciona aunque JavaScript esté deshabilitado. Mejor soporte para lectores de pantalla.

Implementación Técnica

Así de simple es implementar un icono con animación hover en Astro:

component.astro

---
import { Icon } from 'astro-icon/components';
---

<div class="group">
  <Icon
    name="ph:rocket-launch-duotone"
    class="w-12 h-12 text-blue-600
           transition-transform duration-300
           group-hover:scale-110 group-hover:-rotate-6"
  />
</div>

Nota: La clase group en el contenedor padre permite que los hijos reaccionen al hover del padre usando group-hover:.

Diseño Vivo: Iconos que Respiran sin JavaScript