@nextime-ui/icons
v3.1.9
Published
NeXTIME UI é uma biblioteca de componentes para React, fundamentada no Chakra-UI. Ela faz a inclusão do recurso 'use client' em seus componentes, uma estratégia eficaz para solucionar problemas existentes no Next.js versão 13.
Downloads
823
Maintainers
Readme
@nextime-ui/icons
@nextime-ui/icons é um pacote de ícones reutilizáveis para projetos React, projetado para ser integrado facilmente com o restante da biblioteca NeXTIME UI. Atualmente, ele inclui os ícones do Phosphor Icons, mas tem planos de expansão para incluir outros conjuntos de ícones no futuro.
📚 Sobre
Este pacote tem como objetivo simplificar o uso de ícones em projetos React, garantindo performance e consistência visual. Ele é baseado em bibliotecas confiáveis como Phosphor Icons e Framer Motion, permitindo a criação de ícones animados e altamente configuráveis.
📦 Instalação
Você pode instalar o pacote executando:
pnpm add @nextime-ui/icons
Certifique-se de ter o React instalado no seu projeto como dependência peer.
🛠️ Configuração
O pacote já está configurado para funcionar automaticamente em projetos React. Basta importar os ícones diretamente:
Exemplo de Uso
import { Star, Heart } from '@nextime-ui/icons';
function App() {
return (
<div>
<Star size={32} weight="bold" />
<Heart size={32} color="red" />
</div>
);
}
Todos os ícones seguem a API fornecida pelo Phosphor Icons, permitindo controle sobre propriedades como size
, weight
e color
.
🚀 Scripts Sugeridos
Adicione os seguintes scripts no seu package.json
para facilitar o desenvolvimento:
"scripts": {
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
"dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch",
"lint": "eslint src/**/*.ts* --fix",
"typecheck": "tsc --noEmit"
}
build
: Gera os arquivos prontos para produção.dev
: Inicia o modo de desenvolvimento com watch.lint
: Analisa o código com ESLint e corrige problemas automaticamente.typecheck
: Realiza a verificação de tipos com TypeScript.
🔧 Recursos Incluídos
- Phosphor Icons: Conjunto de ícones moderno e altamente personalizável.
- Framer Motion: Suporte para animações suaves em ícones.
- Base Emotion: Permite estilização customizada dos ícones utilizando CSS-in-JS.
⚙️ Planejamento Futuro
Planejamos expandir o pacote para incluir outros conjuntos de ícones e recursos, como:
- Material Icons
- Heroicons
- Conjuntos de ícones personalizados baseados em SVG.
🌟 Contribuição
Contribuições são bem-vindas! Se você tiver ideias para adicionar novos conjuntos de ícones ou melhorias no pacote, consulte nosso Guia de Contribuição.
📬 Contato
- Repositório: nextimecode/nextime-ui
- Autor: Pedro Duarte - NeXTIME