Package Exports
- @nextime-ui/icons
- @nextime-ui/icons/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nextime-ui/icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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/iconsCertifique-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