Disseny Viu: Icones que Respiren sense JavaScript
Com aconseguir micro-interaccions impactants usant només CSS i SVG estàtic.
El Problema del JavaScript Innecessari
A l'era de les Single Page Applications, molts desenvolupadors han caigut en el parany d'usar llibreries JavaScript pesades per a quelcom tan simple com mostrar icones. React Icons, Font Awesome amb JS, Heroicons amb hidratació... totes aquestes solucions afegeixen kilobytes de JavaScript que el navegador ha de parsejar, compilar i executar.
El resultat: pàgines que triguen més a carregar, puntuacions de Core Web Vitals més baixes, i pitjor experiència d'usuari especialment en dispositius mòbils. Tot això per mostrar... icones estàtiques?
L'alternativa és sorprenentment simple: SVG incrustat directament en l'HTML. Sense JavaScript. Sense hidratació. Sense dependències de runtime. Les icones es renderitzen instantàniament amb el primer byte d'HTML, i les animacions s'aconsegueixen amb CSS pur.
Galeria d'Icones Animades
Passa el ratolí sobre cada icona per veure la seva animació única. Zero JavaScript!
Conclusió: La UX Moderna No Necessita JavaScript
Les icones són petits detalls que marquen una gran diferència. Implementant-les correctament amb SVG estàtic i CSS, aconseguim webs més ràpides, més accessibles i amb millor SEO.
Tornar al blog