@web-portfolio/iconos

Comenzó como un conjunto de iconos para un sitio web personal y evolucionó hasta convertirse en algo que valía la pena publicar por sí solo: no utiliza fuentes de iconos, no requiere solicitudes a CDN durante su ejecución y no tiene nada que se cargue de forma asíncrona. Todo está incluido dentro del paquete y se renderiza al instante.

icons.getresume.devicons.getresume.dev<Icon /><Icon />o el código SVG directamente desde la página.

¿Por qué esto existe?

Construir un portafolio o un panel de control generalmente implica una de dos cosas: incluir una fuente de iconos para unos pocos glifos, o dispersar<img src="...">` por todo el código, apuntando a algún CDN que puede estar activo o no cuando realmente se necesita. Ninguna de estas opciones parecía adecuada para algo tan simple como "mostrar el logotipo de React junto a la palabra React". Este paquete es una alternativa:<Icon name="react" />, listo y funcionando, y el mismo componente sirve tanto si necesitas un distintivo de pila tecnológica, un icono de enlace social o simplemente una flecha para un botón de carrusel.

Algunas cosas que hace a propósito.

• Un único componente, en lugar de 629 importaciones. registry[name]realiza una búsqueda en el momento de la renderización, por lo que nunca terminas conimport { ReactIcon, DockerIcon, PostgresIcon } from '...'que ensucie la parte superior de un archivo.
• Nada se carga en tiempo de ejecución.Todo el registro está empaquetado durante la compilación y optimizado con SVGO, por lo que no hay estado de carga, ni desplazamiento de diseño mientras se carga una imagen, y funciona sin conexión.
• Permite la personalización cuando es apropiado. color,color, yel ancho de líneaLos iconos monocromáticos se recolorean para que coincidan con tu paleta; los elementos de marca que deben mantener un color específico (como el azul del logotipo de React) se dejan sin cambios intencionadamente.
• Listo para usar desde el primer momento.No es necesario recordar instalar un paquete@tipos/paquete para recordar instalar.

Instalación.

npm install @web-portfolio/icons

pnpm add @web-portfolio/icons

añadir el paquete @web-portfolio/icons usando yarn.

Requiere React 18 o una versión posterior.

Un registro, dos paquetes publicados y una galería estática.

El paquete publicado es una parte de un monorepositorio que consta de cuatro paquetes y dos aplicaciones. El directorio "packages/db" contiene un esquema Drizzle para Turso/libSQL; esta es la única parte que interactúa con una base de datos, y solo desde la aplicación "apps/admin" (un panel CRUD protegido por credenciales) y los scripts de inicialización. El directorio "packages/core" es privado e interno: gestiona el proceso de compilación "generate-registry" y el archivo "registry.generated.ts", que ambos están incluidos en los paquetes publicados. El directorio "packages/react" corresponde al paquete "@web-portfolio/icons"; el directorio "packages/sanity-plugin" corresponde al paquete "@web-portfolio/icons-sanity", que es un selector para Studio. La aplicación "apps/gallery", que es el sitio web público ubicado en icons.getresume.dev, es la cuarta aplicación que utiliza el mismo registro y está estilizada según techicons.dev.

Convertir un archivo SVG incrustado en una entrada de registro.

generate-registry.ts es el archivo que realmente genera registry.generated.ts: extrae el código SVG sin procesar de cada icono de Turso, lo procesa con SVGO (con múltiples pasadas, la configuración predeterminada y se omite la eliminación de viewBox porque este se separa y se mantiene intencionalmente), y lo reescribe en una entrada compacta que contiene {viewBox, innerHTML}. Esta reescritura solo se aplica a los iconos de las categorías monocromáticas: las variantes "plain"/"line" de devicon, Material Symbols y Simple Icons. En estos casos, cualquier valor de relleno o trazo codificado directamente se reemplaza por currentColor para que la propiedad <Icon color> realmente funcione. Las categorías de colores de marca (las variantes "original"/"original-wordmark" de devicon) omiten este paso por completo, lo que garantiza que el azul de React o el verde azulado de Docker no se apliquen al texto circundante.

# one-time: schema + all three icon sources
pnpm --filter @web-portfolio/icons-db db:migrate
pnpm --filter @web-portfolio/icons-db seed-all

# SVGO + currentColor normalization -> packages/core/src/registry.generated.ts
pnpm generate-registry

¿De dónde provienen realmente los 633 iconos?

Tres fuentes con licencia, cada una identificada y proporcionada por su propio conjunto de scripts: devicon (MIT) ofrece 578 logotipos de tecnología/herramientas. Material Symbols (Apache-2.0) proporciona 38 elementos: 34 glifos básicos de interfaz de usuario/navegación más 4 símbolos genéricos (Relámpago, Traducir, Lista de verificación, Regalo) que reemplazaron los archivos PNG de Apple SF Symbols que el sitio web utilizaba anteriormente, y cuya redistribución no era segura desde un paquete con licencia abierta. Simple Icons (CC0) proporciona los 17 elementos restantes: 12 logotipos de plataformas sociales que devicon no cubre, y 5 marcas de herramientas para desarrolladores (MCP, Google Analytics, LangChain, Ollama, Pydantic).

No todos los iconos solicitados tienen una fuente con licencia de la cual extraerlos. Segment, Statsig y Google Stitch no están incluidos en ninguno de los tres (Stitch se lanzó después de todas sus últimas versiones). En lugar de copiar un activo de marca sin una licencia de redistribución clara, estos se agregan manualmente a través del flujo "pegar SVG" de las aplicaciones/administración, por la persona que los está agregando, y no mediante el proceso automatizado.

Cada icono en el registro puede indicar con precisión de qué fuente proviene y bajo qué licencia se distribuye, lo cual es más valioso que cualquier otro logotipo adicional.