Repolode
Enviar
guokaigdg

guokaigdg/naive-icons

Una biblioteca de iconos SVG de estilo folk naïf dibujados a mano para React y TypeScript, con una skill opcional para agentes de IA.

Ver en GitHubSitio web
Estrellas
249
Forks
5
Issues abiertos
0
Último commit
hace 6 días

¿Qué es?

Naive Icons es una biblioteca de iconos SVG con un estilo folk de aspecto dibujado a mano. Cada icono se dibuja sobre una cuadrícula de 48x48, con un trazo de 3.5, extremos de línea redondeados y una paleta retro fija; muchos de los seres vivos tienen ojos de punto y una pequeña sonrisa. Cada icono está disponible como archivo SVG y como componente React TSX.

Los componentes de React extienden las props nativas de SVG y aceptan size, color, strokeWidth, fill y title. El ancho del trazo funciona como factor de escala, y se puede asignar currentColor a color para que coincida con el texto que lo rodea. El paquete usa ESM y tiene sideEffects configurado como false, por lo que tanto las importaciones con nombre como las de subrutas se optimizan mediante tree shaking para generar bundles pequeños. También exporta tipos de TypeScript y una NAIVE_PALETTE compartida.

El proyecto también ofrece una skill de agente instalable para Claude Code, Cursor, Codex y herramientas similares, que permite a un asistente elegir iconos según su significado y generar código siguiendo las reglas de diseño de la biblioteca.

Funciones clave

  • 01Iconos de 11 categorías, como interfaz, acciones, medios, navegación, animales y comida.
  • 02Cada icono se distribuye como archivo SVG y como componente React TSX.
  • 03Tipos completos de TypeScript y exportación de una paleta de colores compartida.
  • 04Las props de trazo y color permiten escalar y cambiar el color de los iconos sin perder su aspecto dibujado a mano.
  • 05Skill instalable para agentes de IA que genera código de iconos.

Casos de uso

  • Añadir un conjunto de iconos alegre y dibujado a mano a una aplicación web o página de destino de React.
  • Dar un tono visual cálido y personal a una pantalla de inicio de sesión o de incorporación de usuarios.
  • Usar los archivos SVG sin procesar en un proyecto que no sea de React o en un sprite de iconos.
  • Permitir que un asistente de programación con IA elija e inserte en un proyecto los iconos más adecuados.

Inicio rápido

  1. 1

    Instala el paquete

    npm install naive-icons
  2. 2

    Importa y usa un icono en React

    import { HomeIcon } from 'naive-icons';

Antes de usarlo

  • Muchos iconos tienen los colores codificados directamente, por lo que el fill del elemento raíz no los cambiará; solo se puede cambiar fácilmente el color del stroke.
  • Requiere React 16.8 o posterior.

Temas

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

Preguntas frecuentes

¿Qué es naive-icons?
Una biblioteca de iconos SVG de estilo folk naïf dibujados a mano para React y TypeScript, con una skill opcional para agentes de IA. Naive Icons es una biblioteca de iconos SVG con un estilo folk de aspecto dibujado a mano. Cada icono se dibuja sobre una cuadrícula de 48x48, con un trazo de 3.5, extremos de línea redondeados y una paleta retro fija; muchos de los seres vivos tienen ojos de punto y una pequeña sonrisa. Cada icono está disponible como archivo SVG y como componente React TSX.
¿naive-icons es gratuito? ¿Qué licencia tiene?
naive-icons es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿naive-icons sigue mantenido?
Mantenimiento activo. El último commit de naive-icons fue el 14 oct 2026.
¿Para qué puedo usar naive-icons?
Añadir un conjunto de iconos alegre y dibujado a mano a una aplicación web o página de destino de React. Dar un tono visual cálido y personal a una pantalla de inicio de sesión o de incorporación de usuarios. Usar los archivos SVG sin procesar en un proyecto que no sea de React o en un sprite de iconos. Permitir que un asistente de programación con IA elija e inserte en un proyecto los iconos más adecuados.
¿Cómo se instala naive-icons?
Instala el paquete: npm install naive-icons Importa y usa un icono en React: import { HomeIcon } from 'naive-icons';
¿Dónde consigo naive-icons?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/guokaigdg/naive-icons

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados