CSS to SVG コンバーター

バンドルされたNode CLIを使用して、選択したCSSアイコンクラスをSVG候補に変換します。コンバーターはCSS宣言と疑似要素ルールを直接読み取ります。スクリーンショットから形状を推測したり、layout2vectorに依存することはありません。

ワークフロー

アイコンが定義されているCSSファイルと、該当する .アイコン名 セレクターを特定します。ルートジオメトリを定義しているプロジェクトのグローバルリセット/foundation CSSも含めてください。ただし、* ルールが疑似要素の box-sizing を変更するとは想定しないでください。

まずは1つのアイコンでコンバーターを実行します。

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"

修飾子状態の場合は、意味的なアイコン名はそのままに、状態を別途指定します。

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"

レポートを確認します。status: "manual-review" や警告がある場合は、ブラウザでレンダリングしたCSSソースとSVGを比較してください。
バッチを受け入れる前に、CSSとSVGを同じキャンバスサイズでレンダリングします。正式なアセットは自動で置き換えないでください。
視覚的な比較とユーザーの承認を得た後でのみSVGをプロモーションしてください。

サポートするCSS

.アイコン名、.アイコン名::before、.アイコン名::after ルール
px単位とシンプルなオフセットを持つ絶対配置疑似要素
currentColor、単色背景、border、個別のボーダー
矩形レイヤーとして使用される linear-gradient(currentColor 0 0) ... / ... no-repeat
clip-path: polygon(...)
rotate()、scaleX()、scaleY() のtransform
実線および破線の矩形ボーダー
透明ボーダーのCSS三角形
塗りつぶし矩形およびストローク矩形の border-radius
SVGの clipPath を使用したクリップされた角丸ボーダー

出力はデフォルトで16×16のviewBox、透明背景、currentColor を使用します。viewBoxはアイコンのデザインキャンバスです。デフォルト以外の .アイコン名 のボックスは、そのキャンバス内の中央に配置されてから、相対 top / left オフセットが適用されます。ジオメトリエラーを隠すためにグローバルなオーバーフローオーバーライドを追加しないでください。このツールはVSの border-box ルートモデルを適用し、疑似要素はCSSデフォルトの content-box モデルを維持します（明示的にオーバーライドされた場合を除く）。絶対配置の子要素はルートのパディングボックスに対して解決され、シンプルなtransformは平坦化され、2px/2pxの破線ボーダーリズムが使用されます。サポート外の宣言は報告され、隠されません。

ガードレール

生成された出力は、レビューされるまで正式なアイコンディレクトリから分離してください。
--force なしで既存の出力を上書きしないでください。
バッチ変換時は、SVGの横にレポートを保存してください。
レポートが manual-review と表示している場合、変換成功と説明しないでください。
CSSの視覚的等価性が引き続き受け入れ基準です。コンバーターは意図的に保守的に動作します。

CLIリファレンス

--css <ファイル>       繰り返し可能なCSS入力ファイル。
  --icon <名前>         `icon-` プレフィックスを除いたアイコンクラスのサフィックス。
  --variant <名前>      オプションの修飾子状態。例: `checked`。
--output <ファイル>    SVG出力パス。
--report <ファイル>    オプションのJSONレポートパス。
--size <数値>         正方形のキャンバスサイズ。デフォルト16。
--force               既存の出力の置き換えを許可します。

実装の詳細と認識されるパターンについては、references/css-patterns.md を参照してください。

CSS-SVGコンバーター