CSS para SVG Converter

Conversor de CSS para SVG

Use a CLI Node.js fornecida para converter classes de ícones CSS selecionadas em candidatos SVG. O conversor lê declarações CSS e regras de pseudo-elementos diretamente; ele não infere geometria a partir de uma captura de tela e não depende de layout2vector.

Fluxo de Trabalho

1. Identifique o(s) arquivo(s) CSS que contêm o ícone e o seletor .icon-name exato. Inclua o CSS global de reset/foundation do projeto quando ele definir geometria raiz; não presuma que sua regra * altera o box-sizing do pseudo-elemento.

2. Execute o conversor para um ícone primeiro:

   node scripts/convert-icons.mjs `
     --css "D:\Coding\VisualStandards\css\foundations.css" `
     --css "D:\Coding\VisualStandards\css\components-icon-basic.css" `
     --icon plus `
     --output "Temp\plus.svg" `
     --report "Temp\plus.report.json"
   

   Para um estado modificador, mantenha o nome semântico do ícone e passe o estado separadamente:

   node scripts/convert-icons.mjs `
     --css "D:\Coding\VisualStandards\css\components-icon-page.css" `
     --icon checkbox `
     --variant checked `
     --output "Temp\checkbox-checked.svg" `
     --report "Temp\checkbox-checked.report.json"
   

3. Inspecione o relatório. Trate status: "manual-review" ou qualquer aviso como motivo para inspecionar o SVG em comparação com a fonte CSS renderizada no navegador.

4. Renderize CSS e SVG no mesmo tamanho de tela antes de aceitar um lote. Não substitua automaticamente ativos formais.

5. Promova um SVG somente após comparação visual e aprovação do usuário.

CSS Suportado

• Regras .icon-name, .icon-name::before e .icon-name::after
• pseudo-elementos absolutos com dimensões em px e deslocamentos simples
• currentColor, fundos sólidos, border e bordas individuais
• camadas linear-gradient(currentColor 0 0) ... / ... no-repeat usadas como retângulos
• clip-path: polygon(...)
• Transformações rotate(), scaleX() e scaleY()
• Bordas retangulares sólidas e pontilhadas
• Triângulos CSS com borda transparente
• border-radius em retângulos preenchidos e contornados
• Bordas arredondadas recortadas via clipPath SVG

A saída usa um viewBox 16×16 por padrão, fundo transparente e currentColor. O viewBox é a tela de design do ícone; uma caixa .icon-name não padrão é centralizada dentro dessa tela antes que seu deslocamento relativo top / left seja aplicado. Não adicione uma substituição de overflow global para ocultar erros de geometria. A ferramenta aplica o modelo de root border-box do VS, mantém pseudo-elementos em seu modelo padrão CSS content-box a menos que explicitamente substituído, resolve filhos absolutos em relação à caixa de preenchimento raiz, simplifica transformações simples e usa o ritmo de borda pontilhada 2px/2px. Ela relata declarações não suportadas em vez de ocultá-las.

Diretrizes de Segurança

• Mantenha a saída gerada separada dos diretórios formais de ícones até a revisão.
• Nunca sobrescreva uma saída existente sem --force.
• Preserve o relatório junto ao SVG ao converter um lote.
• Não descreva um resultado como convertido com sucesso se o relatório disser manual-review.
• A equivalência visual CSS continua sendo o critério de aceitação; o conversor é intencionalmente conservador.

Referência da CLI

--css <arquivo>       Arquivo de entrada CSS repetível.
  --icon <nome>        Sufixo da classe do ícone sem o prefixo `icon-`.
  --variant <nome>     Estado modificador opcional, como `checked`.
--output <arquivo>    Caminho de saída do SVG.
--report <arquivo>    Caminho opcional do relatório JSON.
--size <número>       Tamanho da tela quadrada; padrão 16.
--force               Permite substituir uma saída existente.

Para detalhes de implementação e padrões reconhecidos, leia references/css-patterns.md.