Repolode
Enviar
guokaigdg

guokaigdg/naive-icons

Biblioteca de ícones SVG em estilo de arte popular ingênua, desenhados à mão, para React e TypeScript, com skill opcional para agentes de IA.

Ver no GitHubSite
Estrelas
249
Forks
5
Issues abertas
0
Último commit
há 6 dias

O que é?

Naive Icons é uma biblioteca de ícones SVG com visual de arte popular desenhada à mão. Cada ícone é desenhado em uma grade de 48x48, com traço de 3.5, extremidades arredondadas e uma paleta retrô fixa; muitos seres vivos também têm olhos pontilhados e um pequeno sorriso. Todos os ícones estão disponíveis como arquivos SVG e componentes React TSX.

Os componentes React estendem as props nativas de SVG e aceitam size, color, strokeWidth, fill e title. A largura do traço funciona como fator de escala, e color pode ser definido como currentColor para acompanhar o texto ao redor. O pacote usa ESM e define sideEffects como false, então tanto as importações nomeadas quanto as importações de subpaths são reduzidas pelo tree-shaking, gerando bundles pequenos. Também exporta tipos TypeScript e uma NAIVE_PALETTE compartilhada.

O projeto também oferece uma skill instalável para agentes, compatível com Claude Code, Cursor, Codex e ferramentas semelhantes. Ela permite que um assistente escolha ícones pelo significado e gere código seguindo as regras de design da biblioteca.

Recursos principais

  • 01Ícones em 11 categorias, incluindo interface, ações, mídia, navegação, animais e comida.
  • 02Cada ícone é fornecido como arquivo SVG e componente React TSX.
  • 03Tipos TypeScript completos e exportação de uma paleta de cores compartilhada.
  • 04As props de traço e cor ajustam a escala e recolorem os ícones sem perder o visual desenhado à mão.
  • 05Skill instalável para agentes de IA gerarem código com ícones.

Casos de uso

  • Adicionar um conjunto de ícones divertidos e desenhados à mão a um app React ou landing page.
  • Dar um tom visual acolhedor e pessoal a uma tela de login ou onboarding.
  • Usar os arquivos SVG diretamente em um projeto que não usa React ou em um sprite de ícones.
  • Permitir que um assistente de programação com IA escolha e insira ícones adequados em um projeto.

Início rápido

  1. 1

    Instale o pacote

    npm install naive-icons
  2. 2

    Importe e use um ícone no React

    import { HomeIcon } from 'naive-icons';

Antes de usar

  • As cores de muitos ícones são definidas diretamente no código, então o fill do elemento raiz não vai alterá-las; apenas a cor do stroke pode ser facilmente alterada.
  • Requer React 16.8 ou mais recente.

Tópicos

#icons#svg#react#typescript#ui-design#hand-drawn#component-library#naive

Perguntas frequentes

O que é naive-icons?
Biblioteca de ícones SVG em estilo de arte popular ingênua, desenhados à mão, para React e TypeScript, com skill opcional para agentes de IA. Naive Icons é uma biblioteca de ícones SVG com visual de arte popular desenhada à mão. Cada ícone é desenhado em uma grade de 48x48, com traço de 3.5, extremidades arredondadas e uma paleta retrô fixa; muitos seres vivos também têm olhos pontilhados e um pequeno sorriso. Todos os ícones estão disponíveis como arquivos SVG e componentes React TSX.
naive-icons é gratuito? Qual é a licença?
naive-icons é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
naive-icons ainda é mantido?
Manutenção ativa. O último commit de naive-icons foi em 14 de out. de 2026.
Para que posso usar naive-icons?
Adicionar um conjunto de ícones divertidos e desenhados à mão a um app React ou landing page. Dar um tom visual acolhedor e pessoal a uma tela de login ou onboarding. Usar os arquivos SVG diretamente em um projeto que não usa React ou em um sprite de ícones. Permitir que um assistente de programação com IA escolha e insira ícones adequados em um projeto.
Como instalar naive-icons?
Instale o pacote: npm install naive-icons Importe e use um ícone no React: import { HomeIcon } from 'naive-icons';
Onde consigo naive-icons?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/guokaigdg/naive-icons

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados