CSS vers SVG Converter

Convertisseur CSS → SVG

Utilise le CLI Node fourni pour convertir des classes d'icônes CSS sélectionnées en candidats SVG. Le convertisseur lit directement les déclarations CSS et les règles de pseudo-éléments ; il n'infère pas la géométrie à partir d'une capture d'écran et ne dépend pas de layout2vector.

Flux de travail

1. Identifiez le(s) fichier(s) CSS contenant l'icône et le sélecteur exact .icon-name. Incluez le CSS de reset/fondation du projet lorsqu'il définit la géométrie racine ; ne supposez pas que sa règle * modifie le box-sizing des pseudo-éléments.

2. Lancez d'abord le convertisseur pour une icône :

   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"
   

   Pour un état modificateur, conservez le nom sémantique de l'icône et passez l'état séparément :

   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. Inspectez le rapport. Considérez status: "manual-review" ou tout avertissement comme une raison d'inspecter le SVG par rapport à une source CSS rendue dans le navigateur.

4. Rendez le CSS et le SVG dans la même taille de toile avant d'accepter un lot. Ne remplacez pas automatiquement les assets formels.

5. Ne promouvez un SVG qu'après comparaison visuelle et approbation de l'utilisateur.

CSS pris en charge

• Règles .icon-name, .icon-name::before et .icon-name::after
• Pseudo-éléments absolus avec dimensions px et décalages simples
• currentColor, arrière-plans unis, border et bordures individuelles
• Couches linear-gradient(currentColor 0 0) ... / ... no-repeat utilisées comme rectangles
• clip-path: polygon(...)
• Transformations rotate(), scaleX() et scaleY()
• Bordures rectangulaires pleines et pointillées
• Triangles CSS à bordure transparente
• border-radius sur rectangles remplis et contourés
• Bordures arrondies rognées via clipPath SVG

La sortie utilise par défaut une viewBox de 16×16, un fond transparent et currentColor. La viewBox est la toile de conception de l'icône ; une boîte .icon-name non par défaut est centrée dans cette toile avant que son décalage relatif top / left ne soit appliqué. N'ajoutez pas de remplacement global overflow pour masquer des erreurs de géométrie. L'outil applique le modèle racine border-box de VS, maintient les pseudo-éléments dans leur modèle CSS par défaut content-box sauf si explicitement remplacé, résout les enfants absolus par rapport à la boîte de remplissage racine, aplatit les transformations simples et utilise le rythme de bordure pointillée 2px/2px. Il signale les déclarations non prises en charge plutôt que de les cacher.

Garde-fous

• Gardez la sortie générée séparée des répertoires d'icônes formels jusqu'à révision.
• Ne remplacez jamais une sortie existante sans --force.
• Conservez le rapport à côté du SVG lors de la conversion d'un lot.
• Ne décrivez pas un résultat comme converti avec succès si le rapport indique manual-review.
• L'équivalence visuelle CSS reste le critère d'acceptation ; le convertisseur est intentionnellement conservateur.

Référence CLI

--css <fichier>     Fichier CSS d'entrée répétable.
  --icon <nom>      Suffixe de classe d'icône sans le préfixe `icon-`.
  --variant <nom>   État modificateur optionnel, par exemple `checked`.
--output <fichier>  Chemin du fichier SVG de sortie.
--report <fichier>  Chemin du rapport JSON optionnel.
--size <nombre>     Taille de la toile carrée ; défaut 16.
--force             Permet de remplacer une sortie existante.

Pour les détails d'implémentation et les motifs reconnus, lisez references/css-patterns.md.