Repolode
Enviar
Avijit07x

Avijit07x/animateicons

Biblioteca para React, Vue, Angular e JavaScript puro com 1.170 ícones SVG animados que entram em ação ao passar o cursor ou sob demanda.

Ver no GitHubSite
Estrelas
1,514
Forks
78
Issues abertas
0
Último commit
há 10 dias

O que é?

AnimateIcons é uma biblioteca de ícones em que cada ícone já vem com animação. Ela inclui 1.170 ícones SVG baseados nos conjuntos Lucide e Hugeicons, e todos são animados ao passar o cursor por padrão. Os desenvolvedores também podem acionar as animações diretamente pelo código.

Os ícones aceitam props para tamanho, cor, duração e ativação ou desativação da animação, além de receberem um className para estilização. No React, os pacotes são importados por conjunto de ícones, como @animateicons/react/lucide ou @animateicons/react/huge. Há pacotes separados para Vue 3 e Nuxt, Angular e JavaScript puro, que também funciona com web components, Svelte, Solid e Astro. As animações são criadas com a biblioteca motion, incluída no pacote React.

O hook useIconHover anima um ícone quando o usuário passa o cursor ou clica no botão, link ou card ao redor dele. Um comando CLI permite copiar o código-fonte de um ícone para um projeto, e o projeto também documenta a integração com shadcn e MCP.

Recursos principais

  • 01Oferece 1.170 ícones SVG com animação acionada ao passar o cursor por padrão.
  • 02Aceita props para tamanho, cor, duração e ativação ou desativação da animação.
  • 03Oferece pacotes para React, Vue e Nuxt, Angular e JavaScript puro.
  • 04Inclui o hook useIconHover para animar ícones a partir de um botão ou card ao redor.
  • 05Permite copiar o código-fonte de ícones individuais para o projeto com um comando CLI.

Casos de uso

  • Adicionar feedback visual com animações a botões, itens de navegação ou sinos de notificação em um app web com React.
  • Usar ícones animados em um site com Vue ou Nuxt sem escrever código de animação.
  • Copiar um ícone para uma base de código e personalizá-lo diretamente.

Início rápido

  1. 1

    Instale o pacote React

    pnpm add @animateicons/react
  2. 2

    Importe um ícone e renderize-o

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

Antes de usar

  • As formas dos ícones são derivadas do Lucide e do Hugeicons, portanto, aplicam-se os avisos de terceiros.

Em coleções

Frameworks frontend e componentes de interface

Tópicos

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

Perguntas frequentes

O que é animateicons?
Biblioteca para React, Vue, Angular e JavaScript puro com 1.170 ícones SVG animados que entram em ação ao passar o cursor ou sob demanda. AnimateIcons é uma biblioteca de ícones em que cada ícone já vem com animação. Ela inclui 1.170 ícones SVG baseados nos conjuntos Lucide e Hugeicons, e todos são animados ao passar o cursor por padrão. Os desenvolvedores também podem acionar as animações diretamente pelo código.
animateicons é gratuito? Qual é a licença?
animateicons é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
animateicons ainda é mantido?
Manutenção ativa. O último commit de animateicons foi em 27 de out. de 2026.
Para que posso usar animateicons?
Adicionar feedback visual com animações a botões, itens de navegação ou sinos de notificação em um app web com React. Usar ícones animados em um site com Vue ou Nuxt sem escrever código de animação. Copiar um ícone para uma base de código e personalizá-lo diretamente.
Como instalar animateicons?
Instale o pacote React: pnpm add @animateicons/react Importe um ícone e renderize-o: import { BellRingIcon } from "@animateicons/react/lucide";
Onde consigo animateicons?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/Avijit07x/animateicons

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados