Ícones
Quatro conjuntos de ícones, e a única pergunta que decide qual deles desenha uma marca.
O duxt recorre a quatro coleções do Iconify. A pergunta nunca é «qual fica melhor aqui», mas o que é aquilo que se desenha, porque esse é o único teste que dá duas vezes a mesma resposta.
| Conjunto | Desenha | Cor | Nomeado em |
|---|---|---|---|
| lucide | a interface que o duxt desenha por si | monocromático, herda currentColor | em qualquer lado; o padrão |
| vscode-icons | um ficheiro, a linguagem de um bloco, uma ferramenta da stack | própria | file-icons.ts, e os separadores dos gestores |
| Simple Icons | uma plataforma, um serviço ou uma empresa enquanto tal | monocromático | o componente que o nomeia |
| flag-icons | a região de um locale | própria | DuxtLocale, derivado |
A regra
Decide aquilo que está a ser desenhado, e há duas espécies de marca:
- A stack — um ficheiro, a linguagem de um bloco, uma ferramenta que se executa — é vscode-icons. Traz as cores reais no próprio ficheiro, que é precisamente o que uma árvore de ficheiros e um cabeçalho de código precisam.
- Um terceiro enquanto tal — uma plataforma, um serviço, uma empresa para a qual o site aponta ou à qual entrega alguma coisa — é Simple Icons.
Tudo o que não é uma marca — um botão de copiar, um chevron, uma lupa, uma seta de ligação externa — é lucide, e não exige decisão nenhuma.
Formulada por domínio e não por disponibilidade, a regra prolonga-se sozinha. O
Laravel, o GitHub, o Discord e a OpenAI são Simple Icons porque são partes que
este site nomeia, não peças da stack de que é feito. Os gestores de pacotes são
vscode-icons porque um separador que executa pnpm add nomeia uma ferramenta da
stack.
Decide o domínio, não a coleção. O vscode-icons tem file-type-claude — e é, já
pelo seu próprio espaço de nomes, o ícone de um ficheiro Claude. O botão que
envia esta página para a plataforma Claude é simple-icons:claude, porque é
a plataforma que ele nomeia. A mesma leitura mantém simple-icons:openai ao seu
lado em vez de repartir um par de botões por duas coleções.
Porquê não um só conjunto para tudo
Porque monocromático e com cor própria são trabalhos diferentes, não gostos diferentes.
Um ícone de interface tem de assumir a cor do texto, senão luta com cada estado
à sua volta: hover, ativo, esbatido, desativado. O lucide herda currentColor,
por isso o controlo é estilizado uma vez e o ícone acompanha.
Um ícone de tipo de ficheiro tem de manter as suas cores, senão uma árvore de
ficheiros passa a ser uma coluna de formas cinzentas iguais. É essa a razão de
ser do vscode-icons, e por isso app/utils/file-icons.ts mapeia lá cada extensão
e cada identificador de linguagem.
A cor não é invenção nossa
Os separadores dos gestores de pacotes eram antes Simple Icons tingidos à mão: oito valores hexadecimais, dois por gestor, porque um só não serve os dois temas — o creme do bun desaparece sobre branco e o vermelho do npm fica turvo sobre preto. Cada um era um número que alguém leu numa página de marca e teria de ler outra vez quando a marca mudasse.
O vscode-icons dispensou a tabela ao trazer as cores no próprio ficheiro. Quando
uma marca ainda precisa de ajuda, a coleção costuma dizê-lo ela mesma: o pnpm
são quadrados cor de laranja e brancos, pelo que metade da grelha desaparece
numa página branca — e o vscode-icons publica file-type-light-pnpm com
#4e4e4e no lugar do branco, exatamente para isso. Não publica variante clara
para nenhum outro gestor aqui presente.
Uma marca que precisa das duas grafias é desenhada duas vezes e trocada pela
classe de tema (dark:hidden / hidden dark:block) — a mesma técnica que o
cartaz de pré-visualização da página inicial usa para as suas duas capturas. Um
filtro CSS sobre uma marca a cores produz uma cor que ninguém escolheu.
Licenças, e o que uma licença não pode conceder
As quatro coleções são permissivas e compatíveis com a MIT do duxt: o
vscode-icons e o flag-icons são MIT, o lucide é ISC, o Simple Icons é CC0-1.0.
Cada uma é nomeada com a sua licença na página de
agradecimentos, porque icon.clientBundle embute os SVG naquilo que
é publicado — o pacote transporta as obras, logo transporta os avisos.
Uma licença sobre o ficheiro não é uma licença sobre a marca. O Simple Icons di-lo na sua própria LICENSE: a CC0 liberta o SVG e não pode libertar um direito de marca que nunca deteve. O mesmo vale para os tipos de ficheiro do vscode-icons: a MIT cobre o desenho, não as marcas Python, Rust ou Vue lá dentro.
O que o duxt faz é uso nominativo: o logótipo do bun está no separador que
executa bun add, o ícone do Python identifica um bloco de Python, e as marcas
da Claude e da OpenAI estão nos botões que enviam a página para esses serviços.
Nomear uma coisa para a identificar é o uso que o direito de marcas permite sem
autorização. Usar uma dessas marcas como logótipo, favicon ou aval do duxt já não
seria — e o duxt não o faz.