JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 54
  • Score
    100M100P100Q40664F
  • License MIT

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.

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

version license

@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