@wecareu/icons

Sistema de ícones SVG e animações Lottie para WeCareU Design System.

Instalação

npm install @wecareu/icons react-native-svg lottie-react-native

Uso

Ícones SVG

import { Icon } from '@wecareu/icons';

// Uso básico
<Icon name="home" />

// Com tamanho e cor personalizados
<Icon name="heart" size={24} color="#ff0000" />

// Com outras props do SVG
<Icon name="search" width={32} height={32} fill="currentColor" />

Animações Lottie

import { Lottie } from '@wecareu/icons';

// Uso básico
<Lottie name="dots" />

// Com tamanho e opções personalizadas
<Lottie 
  name="notification" 
  size={200} 
  autoPlay={true}
  loop={true}
  speed={1.5}
/>

Ícones Disponíveis

O pacote inclui 69 ícones SVG otimizados para React Native:

• arrowDown, arrowLeft, arrowRight, arrowSpin, arrowUp
• avatar, avatarFill
• bank, bookProfile, bot, busStop
• calendar, camera, car, card, chatClose
• chevronDown, chevronLeft, chevronRight, chevronUp
• close, config, correct, crown
• denounce, diamond, distance, dryer
• edit, eyeOff, eyeOn
• filter, fingerPrint, fingernail
• heart, heartFilled, home
• image, imageGallery, information
• list, listAlt, location, lock, mail
• maskSad, menu, money, money1, moneyCard
• notificationOff, notificationOn
• paperPlane, pix, plus
• search, share, star, starFilled, stars
• supportCenter, tag, time, trash, upload
• user, userBlock, userFilled, walk

Animações Lottie Disponíveis

• dots - Animação de pontos de carregamento
• locations - Animação de localização/mapa
• notification - Animação de notificação

Props

Icon (SVG)

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | name | IconName | - | Nome do ícone (obrigatório) | | size | number | - | Tamanho do ícone (aplica width e height) | | color | string | - | Cor do ícone (aplica fill) | | ...rest | SvgProps | - | Outras props do componente SVG |

Lottie (Animações)

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | name | LottieAnimationName | - | Nome da animação (obrigatório) | | size | number | - | Tamanho da animação (aplica width e height) | | autoPlay | boolean | true | Inicia automaticamente | | loop | boolean | true | Loop infinito | | speed | number | 1 | Velocidade da animação | | style | ViewStyle | - | Estilos customizados | | testID | string | - | ID para testes |

Desenvolvimento

Gerar Ícones SVG

Para gerar os componentes TSX a partir dos arquivos SVG:

npm run icons:gen

Gerar Mapa Lottie

Para gerar o mapa de animações Lottie:

npm run lottie:gen

Build

Para fazer build completo do pacote (gera ícones, mapa Lottie e faz build):

npm run build

Estrutura

src/
├── assets/
│   ├── svg/          # Arquivos SVG originais
│   └── lottie/       # Arquivos JSON Lottie
├── generated/        # Componentes TSX auto-gerados
├── icons-map.ts      # Mapa de ícones SVG e tipos
├── lottie-map.ts     # Mapa de animações Lottie (auto-gerado)
├── Icon.tsx          # Componente de ícones SVG
├── Lottie.tsx        # Componente de animações Lottie
└── index.tsx         # Exports públicos

Características

• ✅ Build automático: SVGs são convertidos em componentes TSX usando @svgr/core
• ✅ Animações Lottie: Suporte completo para animações JSON Lottie
• ✅ TypeScript: Tipagem completa com IconName, LottieAnimationName e props
• ✅ Tree-shaking: Suporte completo para tree-shaking
• ✅ React Native: Otimizado para React Native
• ✅ Sem configuração: Não requer transformers adicionais
• ✅ Acessibilidade: Suporte nativo a props de acessibilidade

Dependências

• react (peer dependency)
• react-native (peer dependency)
• react-native-svg (peer dependency)
• lottie-react-native (peer dependency, >= 6.0.0)

Licença

UNLICENSED