Iconos
Cuatro conjuntos de iconos, y la única pregunta que decide cuál de ellos dibuja una marca.
duxt toma de cuatro colecciones de Iconify. La pregunta nunca es «cuál queda mejor aquí», sino qué es aquello que se dibuja, porque esa es la única prueba que da dos veces la misma respuesta.
| Conjunto | Dibuja | Color | Se nombra en |
|---|---|---|---|
| lucide | la interfaz que duxt dibuja por su cuenta | monocromo, hereda currentColor | en cualquier sitio; el estándar |
| vscode-icons | un archivo, el lenguaje de un bloque, una herramienta del stack | propio | file-icons.ts, y las pestañas de gestores |
| Simple Icons | una plataforma, un servicio o una empresa como tal | monocromo | el componente que lo nombra |
| flag-icons | la región de un locale | propio | DuxtLocale, derivado |
La regla
Decide qué es lo que se dibuja, y hay dos clases de marca:
- El stack —un archivo, el lenguaje de un bloque, una herramienta que ejecutas— es vscode-icons. Lleva los colores reales en el propio archivo, y eso es justo lo que necesitan un árbol de archivos y una cabecera de código.
- Un tercero como tal —una plataforma, un servicio, una empresa a la que el sitio enlaza o a la que entrega algo— es Simple Icons.
Todo lo que no es una marca —un control de copia, un chevrón, una lupa, una flecha de enlace externo— es lucide, y no requiere decisión.
Enunciada por ámbito y no por disponibilidad, la regla se prolonga sola.
Laravel, GitHub, Discord y OpenAI son Simple Icons porque son partes que este
sitio nombra, no piezas del stack con el que está construido. Los gestores de
paquetes son vscode-icons porque una pestaña que ejecuta pnpm add nombra una
herramienta del stack.
Decide el ámbito, no la colección. vscode-icons tiene file-type-claude — y es,
ya por su propio espacio de nombres, el icono de un archivo de Claude. El
botón que envía esta página a la plataforma Claude es simple-icons:claude,
porque es la plataforma lo que nombra. La misma lectura mantiene
simple-icons:openai a su lado en vez de repartir un par de botones entre dos
colecciones.
Por qué no un solo conjunto para todo
Porque monocromo y con color propio son trabajos distintos, no gustos distintos.
Un icono de interfaz debe tomar el color del texto, o pelea con cada estado a su
alrededor: hover, activo, atenuado, deshabilitado. lucide hereda
currentColor, así que el control se estiliza una vez y el icono lo sigue.
Un icono de tipo de archivo debe conservar sus colores, o un árbol de archivos
se convierte en una columna de formas grises idénticas. Para eso existe
vscode-icons, y por eso app/utils/file-icons.ts mapea allí cada extensión y
cada identificador de lenguaje.
El color no es cosa nuestra
Las pestañas de gestores de paquetes eran antes Simple Icons teñidos a mano: ocho valores hexadecimales, dos por gestor, porque uno solo no sirve para los dos temas —el crema de bun desaparece sobre blanco y el rojo de npm se enturbia sobre negro—. Cada uno era un número que alguien leyó en una página de marca y tendría que volver a leer cuando la marca cambiara.
vscode-icons eliminó la tabla llevando los colores en el propio archivo. Cuando
una marca aún necesita ayuda, la colección suele decirlo ella misma: pnpm
son cuadrados naranjas y blancos, así que medio retículo desaparece sobre una
página blanca — y vscode-icons publica file-type-light-pnpm con #4e4e4e en
lugar del blanco, justo para eso. No publica variante clara para ningún otro
gestor de los que hay aquí.
Una marca que necesita ambas grafías se dibuja dos veces y se intercambia por la
clase de tema (dark:hidden / hidden dark:block) — la misma técnica que usa
el póster de vista previa de la portada para sus dos capturas. Un filtro CSS
sobre una marca en color produce un color que nadie eligió.
Licencias, y lo que una licencia no puede conceder
Las cuatro colecciones son permisivas y compatibles con la MIT de duxt:
vscode-icons y flag-icons son MIT, lucide es ISC, Simple Icons es CC0-1.0. Cada
una se nombra con su licencia en la página de créditos, porque
icon.clientBundle incrusta los SVG en lo que se publica — el paquete
transporta las obras, así que transporta los avisos.
Una licencia sobre el archivo no es una licencia sobre la marca. Simple Icons lo dice en su propia LICENSE: CC0 libera el SVG y no puede liberar un derecho de marca que nunca tuvo. Lo mismo vale para los tipos de archivo de vscode-icons: MIT cubre el dibujo, no las marcas de Python, Rust o Vue que hay dentro.
Lo que hace duxt es uso nominativo: el logo de bun está en la pestaña que
ejecuta bun add, el icono de Python etiqueta un bloque de Python, y las marcas
de Claude y OpenAI están en los botones que envían la página a esos servicios.
Nombrar algo para identificarlo es el uso que el derecho de marcas permite sin
autorización. Usar una de esas marcas como logo, favicon o aval de duxt no lo
sería — y duxt no lo hace.