GitRuozhi/CSS-a-SVG-Converter

Convertidor de CSS a SVG

Usa el CLI de Node incluido para convertir clases de iconos CSS seleccionadas en candidatos SVG. El convertidor lee directamente las declaraciones CSS y las reglas de pseudo-elementos; no infiere geometría a partir de una captura de pantalla y no depende de layout2vector.

Flujo de trabajo

1. Identifica los archivos CSS que contienen el icono y el selector exacto .icon-name. Incluye el CSS de reseteo/base global del proyecto cuando defina geometría raíz; no asumas que su regla * cambia el box-sizing de los pseudo-elementos.

2. Ejecuta el convertidor para un icono primero:

   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 un estado modificador, conserva el nombre semántico del icono y pasa el estado por separado:

   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. Inspecciona el informe. Trata status: "manual-review" o cualquier advertencia como motivo para inspeccionar el SVG contra una fuente CSS renderizada en el navegador.

4. Renderiza CSS y SVG en el mismo tamaño de lienzo antes de aceptar un lote. No reemplaces activos formales automáticamente.

5. Solo promociona un SVG después de una comparación visual y aprobación del usuario.

CSS compatible

• Reglas .icon-name, .icon-name::before y .icon-name::after
• pseudo-elementos absolutos con dimensiones en px y desplazamientos simples
• currentColor, fondos sólidos, border y bordes individuales
• capas linear-gradient(currentColor 0 0) ... / ... no-repeat utilizadas como rectángulos
• clip-path: polygon(...)
• transformaciones rotate(), scaleX() y scaleY()
• bordes rectangulares sólidos y punteados
• triángulos CSS de borde transparente
• border-radius en rectángulos rellenos y trazados
• bordes redondeados recortados mediante clipPath SVG

La salida usa por defecto un viewBox de 16×16, fondo transparente y currentColor. El viewBox es el lienzo de diseño del icono; un cuadro .icon-name no predeterminado se centra dentro de ese lienzo antes de aplicar su desplazamiento relativo top/left. No agregues una anulación global de desbordamiento para ocultar errores de geometría. La herramienta aplica el modelo raíz border-box de VS, mantiene los pseudo-elementos en su modelo content-box predeterminado de CSS a menos que se anule explícitamente, resuelve hijos absolutos contra el cuadro de relleno raíz, aplana transformaciones simples, y utiliza el ritmo de borde punteado de 2px/2px. Reporta declaraciones no compatibles en lugar de ocultarlas.

Barreras de seguridad

• Mantén la salida generada separada de los directorios formales de iconos hasta que sea revisada.
• Nunca sobrescribas una salida existente sin --force.
• Conserva el informe junto al SVG al convertir un lote.
• No describas un resultado como convertido exitosamente si el informe dice manual-review.
• La equivalencia visual CSS sigue siendo el criterio de aceptación; el convertidor es intencionalmente conservador.

Referencia del CLI

--css <archivo>       Archivo CSS de entrada repetible.
  --icon <nombre>      Sufijo de la clase del icono sin el prefijo `icon-`.
  --variant <nombre>   Estado modificador opcional, como `checked`.
--output <archivo>    Ruta de salida SVG.
--report <archivo>    Ruta opcional del informe JSON.
--size <número>       Tamaño del lienzo cuadrado; valor predeterminado 16.
--force               Permite reemplazar una salida existente.

Para detalles de implementación y patrones reconocidos, consulta references/css-patterns.md.