lucide-animated

Biblioteca React com ícones no estilo Lucide e animações (hover/controladas) usando Motion.

Instalação

No seu projeto React:

npm install lucide-animated react motion
# ou
pnpm add lucide-animated react motion
# ou
yarn add lucide-animated react motion

Peer dependencies: react (>=18) e motion (>=11).

Uso

Importar ícones

import { CircleCheckIcon, TrendingUpIcon, ListIcon } from 'lucide-animated'

Uso básico (animação no hover)

Por padrão, a animação dispara ao passar o mouse sobre o ícone:

<CircleCheckIcon className="text-blue-500" size={32} />
<TrendingUpIcon size={28} />

Controle por ref

Você pode controlar a animação programaticamente usando a ref. Quando usa a ref, o hover não dispara a animação automaticamente:

import { useRef } from 'react'
import { CircleCheckIcon, type CircleCheckIconHandle } from 'lucide-animated'

function MyComponent() {
  const iconRef = useRef<CircleCheckIconHandle>(null)

  return (
    <>
      <CircleCheckIcon ref={iconRef} size={28} />
      <button onClick={() => iconRef.current?.startAnimation()}>
        Animar
      </button>
      <button onClick={() => iconRef.current?.stopAnimation()}>
        Parar
      </button>
    </>
  )
}

Props comuns

Todos os ícones aceitam:

• size (number): tamanho em pixels (padrão varia por ícone, ex.: 24 ou 28).
• className: classes CSS (ex.: Tailwind para cor text-current, text-blue-500).
• Todas as props de HTMLAttributes<HTMLDivElement>: onMouseEnter, onMouseLeave, style, etc.

A cor do traço segue currentColor, então use className="text-..." para definir a cor.

Ícones disponíveis

| Componente | Descrição | |---------------------|------------------| | CircleCheckIcon | Círculo com check | | CircleCheckBigIcon| Círculo grande com check | | DatabaseIcon | Ícone de banco de dados | | GitBranchIcon | Branch do Git | | ListIcon | Lista | | MessageCircleIcon | Balão de mensagem | | SquareStackIcon | Pilha de quadrados | | TrendingUpIcon | Gráfico subindo | | TrendingDownIcon | Gráfico caindo |

Sincronizar com lucide.dev/icons

Os ícones vêm do lucide-animated. O script de atualização só adiciona ícones que existem no Lucide (evita duplicar e mantém alinhado ao lucide.dev):

• Quem já existe na biblioteca → não cria de novo.
• Quem não existe e está no Lucide + lucide-animated → adiciona.

node scripts/fetch-icons.mjs

Para filtrar pela lista oficial do Lucide, é preciso do arquivo scripts/lucide-icon-names.json. Duas opções:

1. Gerar com token do GitHub (evita 403):

   set GITHUB_TOKEN=seu_token
   node scripts/fetch-lucide-list.mjs

   Depois rode node scripts/fetch-icons.mjs de novo.

2. Sem lista do Lucide: o script considera todos os ícones do lucide-animated (sem filtro por lucide.dev).

Build da biblioteca

Para gerar o pacote na pasta dist/:

npm install
npm run build

Para publicar no npm, ajuste o name no package.json (ex.: @seu-usuario/lucide-animated) e use npm publish.

Licença

MIT