Crear el icono en Figma es solo el inicio
Prelude DS Icons. Un catálogo de iconos que pesa 10,9 KB, no tiene ninguna dependencia de producción y se actualiza solo con soltar un SVG en una carpeta.
Una librería que nadie encuentra no es una librería, es una carpeta
Llevo tiempo construyendo la iconografía de un design system que corre en producción, y ahí aprendí dónde está el cuello de botella real. No está en el dibujo. Está en todo lo que pasa después.
Un icono existe de verdad cuando alguien que no lo dibujó puede encontrarlo por nombre o por categoría, verlo al tamaño exacto al que va a usarlo, inspeccionar su código, copiarlo y meterlo en su pantalla sin abrir Figma, sin instalar nada y sin preguntarle a la persona de diseño. Hasta ese momento, la librería es un directorio de ficheros con un nombre bonito.
Las opciones que había en el mercado fallaban siempre por el mismo sitio. O venían atadas a un framework, o llegaban dentro de una librería de UI completa que arrastra su propia identidad visual, o eran galerías bonitas sin inspección del SVG ni exportación real. Ninguna resolvía el problema de distribución, que es el único que importa cuando el equipo que consume los iconos no es el que los produce.
Prelude nace de ahí. No es un set de iconos con una web encima. Es la infraestructura de distribución de un set de iconos, y el set es lo que va dentro.
Cero dependencias no es una restricción técnica, es la tesis
La decisión que ordena todo el proyecto es que un catálogo de iconos es infraestructura, y la infraestructura tiene que sobrevivir a las decisiones de framework del equipo que la usa.
Si el catálogo necesita React para abrirse, muere el día que el equipo migra. Si necesita un npm install de 40 KB de runtime para pintar una rejilla de SVGs y abrir un modal, está pagando un peaje por algo que document.createElement y <dialog> resuelven de forma nativa. Toda la lógica de la aplicación cabe en 255 líneas de JavaScript, y esa cifra no es una anécdota de optimización: es la prueba de que el problema no requería un framework.
El resultado son 10,9 KB de JS y CSS minificados para el catálogo entero, y cero dependencias de producción. Vite se queda en la capa de desarrollo, donde aporta HMR y un build con assets hasheados, sin filtrarse a lo que descarga el usuario final.
Soltar un fichero es toda la API
El registro de iconos no se mantiene a mano. Un script de Node recorre /public/icons/, extrae nombre, categoría, etiquetas y tamaños de cada SVG, y genera icons.json. En desarrollo, chokidar vigila la carpeta y regenera el manifiesto al vuelo. La razón de fondo es la misma que aplico en cualquier design system: cualquier proceso que obligue a una persona a registrar el mismo dato en dos sitios acaba desincronizado. Siempre. El manifiesto es un dato derivado, no un dato mantenido. Añadir un icono al catálogo es una acción de un solo paso, y esa es la condición para que la librería crezca sin que yo sea el intermediario.
Normalizar en el consumo, no en el origen
Cada SVG se procesa justo antes de renderizarse: se le quitan los atributos width y height para que escale con el contexto, y se le inyectan aria-hidden="true" y focusable="false" para que no se anuncie a lectores de pantalla ni entre en el orden de tabulación. Lo importante es dónde ocurre eso. La normalización pasa en tiempo de carga y los ficheros fuente quedan intactos. El SVG del repositorio sigue siendo el artefacto de diseño puro, exportable a una fuente de iconos, a un paquete o de vuelta a Figma sin arrastrar decisiones tomadas para una web concreta. Es la diferencia entre una fuente de la verdad y una fuente ya contaminada por su primer consumidor.
Tokens también aquí
Espaciado, tipografía, color, radios, sombras y desenfoques viven como custom properties en :root. Los componentes consumen tokens, nunca valores literales. Cambiar el tema o añadir modo oscuro es sobrescribir propiedades, no reescribir hojas de estilo. Es exactamente el mismo principio que aplico en un design system de producto, aplicado a una herramienta de 794 líneas de CSS, porque la escala no cambia el argumento.
Los detalles que no se ven en una captura
La ficha de cada icono se abre en un <dialog> nativo, que ya trae comportamiento modal, backdrop y cierre con Escape sin librería de por medio. Encima de eso, el foco entra en el modal al abrirse y vuelve al elemento que lo lanzó al cerrarse, que es la parte que casi ninguna implementación casera resuelve.
El resaltado de sintaxis del código SVG tampoco usa librería. Es un tokenizador basado en expresiones regulares que envuelve etiquetas, atributos y valores en <span> con clases CSS. Ahorra un paquete entero de highlighting para el único lenguaje que esta aplicación necesita mostrar.
El botón de copiar usa la Clipboard API con fallback a execCommand para navegadores antiguos, porque una herramienta de design system la acaba abriendo alguien en el navegador corporativo que le han puesto, no en el que tú tienes.
Y todas las transiciones respetan prefers-reduced-motion. La accesibilidad aquí no es una auditoría que pasé al final: es HTML semántico (<dialog>, <nav>, <aside>, <section>), etiquetas ARIA en todo lo interactivo, navegación completa por teclado y skip link, decidido en el mismo momento en que se escribió cada componente.
Impacto medible
10,9 KB
peso total del catálogo en producción, JS y CSS minificados
0
dependencias de producción, con 4 solo en desarrollo
6
tamaños de exportación por icono, generados desde un único SVG fuente
1 paso
añadir un icono al catálogo: soltar el fichero y el manifiesto se regenera
Lo que viene: de galería a pipeline
La máquina está construida y ahora escala el contenido. La cobertura de iconos crece por categorías (acciones, navegación, medios, formas y logos) y cada alta hereda gratis la normalización, la exportación en seis tamaños y la accesibilidad.
Lo siguiente es cerrar el ciclo completo de diseño a código. Primero, control de calidad vectorial automatizado en CI: comprobar que cada icono respeta la rejilla, el grosor de trazo y el tamaño óptico antes de entrar al catálogo, para que la consistencia deje de depender de mi ojo. Después, distribución como paquete, para que el mismo manifiesto que alimenta la galería alimente también el código de producto. Y por último, conexión con las variables de Figma, de modo que el nombre que se decide en diseño sea el mismo que llega al código, sin traducción manual.
El objetivo no es tener más iconos. Es que añadir el icono número doscientos cueste exactamente lo mismo que añadir el número seis.