Repolode
Enviar
Avijit07x

Avijit07x/animateicons

Biblioteca de iconos SVG animados para React, Vue, Angular y JavaScript sin framework, que se animan al pasar el cursor o bajo demanda.

Ver en GitHubSitio web
Estrellas
1,521
Forks
79
Issues abiertos
0
Último commit
hace 7 horas

¿Qué es?

AnimateIcons es una biblioteca de iconos en la que todos incluyen animaciones. Ofrece 1.170 iconos SVG basados en los conjuntos Lucide y Hugeicons, y cada uno se anima al pasar el cursor de forma predeterminada. También puedes activar las animaciones desde el código.

Los iconos aceptan props para el tamaño, el color, la duración y la activación o desactivación de la animación, además de una prop className para aplicar estilos. El paquete de React se importa por conjunto de iconos, por ejemplo, @animateicons/react/lucide o @animateicons/react/huge. Hay paquetes independientes para Vue 3 y Nuxt, Angular y JavaScript sin framework; este último también funciona con web components, Svelte, Solid y Astro. Las animaciones se basan en la biblioteca motion, incluida en el paquete de React.

El hook useIconHover reproduce la animación del icono cuando el usuario pasa el cursor sobre el botón, enlace o tarjeta que lo contiene, o hace clic en estos elementos. Un comando de CLI permite copiar el código fuente de un solo icono en un proyecto; el proyecto también documenta la integración con shadcn y MCP.

Funciones clave

  • 01Ofrece 1.170 iconos SVG que, de forma predeterminada, se animan al pasar el cursor.
  • 02Admite props para configurar el tamaño, el color, la duración y la activación o desactivación de las animaciones.
  • 03Ofrece paquetes para React, Vue y Nuxt, Angular y JavaScript sin framework.
  • 04Incluye el hook useIconHover para animar iconos desde el botón o la tarjeta que los contiene.
  • 05Permite copiar el código fuente de iconos individuales en el proyecto mediante un comando de CLI.

Casos de uso

  • Añadir respuesta visual animada a botones, elementos de navegación o campanas de notificaciones en una aplicación web con React.
  • Usar iconos animados en un sitio con Vue o Nuxt sin escribir código de animación.
  • Copiar un solo icono en una base de código para personalizarlo directamente.

Inicio rápido

  1. 1

    Instala el paquete de React

    pnpm add @animateicons/react
  2. 2

    Importa un icono y muéstralo

    import { BellRingIcon } from "@animateicons/react/lucide";

Antes de usarlo

  • Las formas de los iconos se basan en Lucide y Hugeicons, por lo que se aplican los avisos de terceros.

En colecciones

Frameworks frontend y componentes de interfaz

Temas

#icons#animation#svg#react#vue#angular#motion#ui-components#animated-icons#framer-motion

Preguntas frecuentes

¿Qué es animateicons?
Biblioteca de iconos SVG animados para React, Vue, Angular y JavaScript sin framework, que se animan al pasar el cursor o bajo demanda. AnimateIcons es una biblioteca de iconos en la que todos incluyen animaciones. Ofrece 1.170 iconos SVG basados en los conjuntos Lucide y Hugeicons, y cada uno se anima al pasar el cursor de forma predeterminada. También puedes activar las animaciones desde el código.
¿animateicons es gratuito? ¿Qué licencia tiene?
animateicons es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿animateicons sigue mantenido?
Mantenimiento activo. El último commit de animateicons fue el 7 nov 2026.
¿Para qué puedo usar animateicons?
Añadir respuesta visual animada a botones, elementos de navegación o campanas de notificaciones en una aplicación web con React. Usar iconos animados en un sitio con Vue o Nuxt sin escribir código de animación. Copiar un solo icono en una base de código para personalizarlo directamente.
¿Cómo se instala animateicons?
Instala el paquete de React: pnpm add @animateicons/react Importa un icono y muéstralo: import { BellRingIcon } from "@animateicons/react/lucide";
¿Dónde consigo animateicons?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Avijit07x/animateicons

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados