GitRuozhi/CSS-to-SVG-Converter

CSS zu SVG Konverter

Nutze das gebündelte Node-CLI, um ausgewählte CSS-Icon-Klassen in SVG-Kandidaten zu konvertieren. Der Konverter liest CSS-Deklarationen und Pseudo-Element-Regeln direkt; er leitet keine Geometrie aus einem Screenshot ab und ist nicht auf layout2vector angewiesen.

Arbeitsablauf

1. Identifiziere die CSS-Datei(en), die das Icon enthalten, sowie den genauen Selektoren .icon-name. Füge das globale Reset/Foundation-CSS des Projekts hinzu, wenn es die grundlegende Geometrie definiert; gehe nicht davon aus, dass seine *-Regel das box-sizing von Pseudo-Elementen ändert.

2. Führe den Konverter zunächst für ein Icon aus:

   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"
   

   Für einen Modifikator-Zustand behalte den semantischen Icon-Namen bei und übergib den Zustand separat:

   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. Überprüfe den Report. Behandle status: "manual-review" oder jede Warnung als Grund, das SVG mit einer im Browser gerenderten CSS-Quelle zu vergleichen.

4. Rendere CSS und SVG auf derselben Bildschirmgröße, bevor du einen Batch akzeptierst. Ersetze formale Assets nicht automatisch.

5. Fördere ein SVG erst nach visuellem Vergleich und Benutzerfreigabe.

Unterstütztes CSS

• Regeln für .icon-name, .icon-name::before und .icon-name::after
• absolute Pseudo-Elemente mit px-Abmessungen und einfachen Versätzen
• currentColor, einfarbige Hintergründe, border und einzelne Rahmen
• linear-gradient(currentColor 0 0) ... / ... no-repeat Schichten, die als Rechtecke verwendet werden
• clip-path: polygon(...)
• rotate(), scaleX() und scaleY() Transformationen
• einfarbige und gepunktete rechteckige Rahmen
• durchsichtige Rahmen-CSS-Dreiecke
• border-radius auf gefüllten und konturierten Rechtecken
• beschnittene gerundete Rahmen mittels SVG clipPath

Die Ausgabe verwendet standardmäßig eine 16×16 viewBox, transparenten Hintergrund und currentColor. Die viewBox ist die Designleinwand des Icons; eine nicht standardmäßige .icon-name-Box wird innerhalb dieser Leinwand zentriert, bevor ihr relativer top/left-Versatz angewendet wird. Füge keine globale Überlauf-Überschreibung hinzu, um Geometriefehler zu verbergen. Das Werkzeug verwendet das VS border-box-Wurzelmodell, behält Pseudo-Elemente auf ihrem CSS-Standard-content-box-Modell bei (sofern nicht explizit überschrieben), löst absolute Kinder gegen die Polsterbox der Wurzel auf, vereinfacht einfache Transformationen und verwendet den 2px/2px gepunkteten Rahmenrhythmus. Es meldet nicht unterstützte Deklarationen, anstatt sie zu verstecken.

Leitplanken

• Halte generierte Ausgaben bis zur Überprüfung getrennt von den offiziellen Icon-Verzeichnissen.
• Überschreibe niemals eine vorhandene Ausgabe ohne --force.
• Bewahre den Report neben dem SVG auf, wenn du einen Batch konvertierst.
• Beschreibe ein Ergebnis nicht als erfolgreich konvertiert, wenn der Report manual-review anzeigt.
• Die visuelle CSS-Äquivalenz bleibt das Akzeptanzkriterium; der Konverter ist bewusst konservativ.

CLI-Referenz

--css <datei>       Wiederholbare CSS-Eingabedatei.
  --icon <name>      Icon-Klassen-Suffix ohne das `icon-`-Präfix.
  --variant <name>   Optionaler Modifikator-Zustand, z. B. `checked`.
--output <datei>    SVG-Ausgabepfad.
--report <datei>    Optionaler JSON-Report-Pfad.
--size <zahl>       Quadratische Leinwandgröße; Standard 16.
--force             Erlaubt das Ersetzen einer vorhandenen Ausgabe.

Für Implementierungsdetails und erkannte Muster lies references/css-patterns.md.