# Traço Elétrico + Lucide / sistema de ícones My Card

Versão 2 aprovada nesta etapa; icon set fechado por enquanto. Seis ícones aprovados do icon set autoral **Traço Elétrico**, da My Card, na categoria Colecionar convivem com 18 ícones funcionais do Lucide.

## Comparar

Abra `index.html`. A origem aparece em cada ícone e no cabeçalho das categorias. Os controles comparam tamanhos e cores. Digitar `Traço Elétrico` ou `Lucide` na busca também filtra por origem.

O estudo de interface combina Coleção, Troca e Carta autorais com Loja, Favoritos e ações do Lucide. Os botões demonstram estados visuais; não alteram uma coleção real.

## Origem

- **Traço Elétrico (My Card):** carta, coleção, troca, energia, pacote e novidade. Os SVGs aprovados de 16 e 24 px foram preservados integralmente em `autoral/`.
- **Lucide:** loja, sacola, favoritos, perfil, envio, eventos, busca, filtros, avançar, expandir, adicionar, fechar, confirmar, menu, voltar, ajuda, informação e alerta.

Os arquivos oficiais do Lucide estão em `vendor/lucide/icons/`, sem alterações. `vendor/lucide/origem.json` registra o commit, as URLs e os hashes de cada arquivo. O desenho dos funcionais não foi refeito: apenas tamanho, cor, espessura e atributos de acessibilidade foram ajustados para a apresentação.

Repositório: https://github.com/lucide-icons/lucide

Licença integral: `LICENSE-LUCIDE.txt`, também preservada em `vendor/lucide/LICENSE`. Os SVGs funcionais derivados e os sprites incluem os avisos da licença. A licença do Lucide contém os créditos ISC e os créditos MIT dos ícones derivados do Feather.

## Especificação comum

Grade de 24 x 24 e cor `currentColor`. A referência de 24 px usa traço de 1,75 unidade. Em 16 px, o traço é de 2,25 unidades na grade de 24, equivalente a 1,5 px na tela.

As seis ilustrações autorais possuem desenho próprio para 16 px. O Lucide mantém sua geometria oficial em todos os tamanhos; a versão de 16 ajusta escala e espessura, sem redesenho óptico. Para 32 e 48 px, use o desenho-base de 24 px.

## Arquivos atuais

- `svg/24/` e `svg/16/`: 24 SVGs por tamanho. Os nomes `mc-*` são aliases de integração; o manifesto informa quais desenhos são autorais e quais vêm do Lucide.
- `sprite/my-card-icons-24.svg` e `sprite/my-card-icons-16.svg`: os dois conjuntos reunidos; símbolos terminam em `-24` e `-16`.
- `png/96/`: 24 PNGs transparentes em violeta, 96 x 96 px.
- `manifesto.json`: nomes, usos, origem e mapeamento dos funcionais para os nomes oficiais do Lucide.
- `icones.css`: classes de tamanho para integração.
- `combinar-lucide.py`: gera os arquivos a partir das fontes locais, sem rede ou dependências Python externas. `criar-icones.py` é a entrada de execução atual.
- `templates/`: base local da apresentação, atualizada pelo gerador com o sistema combinado.
- `renderizar.cjs`: exporta PNGs e verifica a apresentação com Node.js, Playwright e Chrome.
- `historico/`: fontes e estudos autorais anteriores. A comparação antiga de Comprar e participar registra o estudo autoral; a seleção ativa dessa categoria usa Lucide.

## Usar no site

Com os sprites servidos na mesma origem do site:

```html
<link rel="stylesheet" href="icones.css">
<a href="/colecao" style="color:#8A2BE2">
  <svg class="mc-icon" aria-hidden="true" focusable="false">
    <use href="sprite/my-card-icons-24.svg#mc-colecao-24"></use>
  </svg>
  Minha coleção
</a>
<button type="button" aria-label="Buscar cartas">
  <svg class="mc-icon" aria-hidden="true" focusable="false">
    <use href="sprite/my-card-icons-24.svg#mc-busca-24"></use>
  </svg>
</button>
```

Para 16 px, use a classe `mc-icon--16`, o arquivo `my-card-icons-16.svg` e o sufixo `-16`. SVG inline e sprites herdam a cor do componente; `<img>` não herda `currentColor` do elemento pai. A apresentação usa símbolos inline para funcionar localmente, sem servidor.

Os ícones funcionais também podem ser consumidos diretamente dos pacotes oficiais Lucide na implementação do site, usando o mapeamento do manifesto e os mesmos parâmetros visuais. A cópia local permite avaliar a combinação sem instalar uma biblioteca ou depender de CDN.