GitRuozhi/CSS-to-SVG-Converter

CSS 轉 SVG 轉換器

使用捆綁的 Node CLI 將選定的 CSS 圖示類別轉換為 SVG 候選項。轉換器直接讀取 CSS 宣告和偽元素規則；它不會從螢幕截圖推斷幾何形狀，也不依賴 layout2vector。

工作流程

1. 識別包含圖示和確切 .icon-name 選擇器的 CSS 檔案。當專案的全局重置/基礎 CSS 定義了根幾何形狀時，請包含它；不要假設它的 * 規則會改變偽元素的 box-sizing。

2. 先為一個圖示執行轉換器：

   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"
   

3. 檢查報告。將 status: "manual-review" 或任何警告視為需要檢查 SVG 與瀏覽器渲染的 CSS 來源的原因。

4. 在接受批次之前，以相同的畫布尺寸渲染 CSS 和 SVG。不要自動取代正式資產。

5. 僅在視覺比較和用戶批准後才升級 SVG。

支援的 CSS

• .icon-name、.icon-name::before 和 .icon-name::after 規則
• 具有 px 尺寸和簡單偏移的絕對定位偽元素
• currentColor、純色背景、border 和個別邊框
• 用作矩形的 linear-gradient(currentColor 0 0) ... / ... no-repeat 圖層
• clip-path: polygon(...)
• rotate()、scaleX() 和 scaleY() 變形
• 實線和虛線矩形邊框
• 透明邊框 CSS 三角形
• 填滿和描邊矩形上的 border-radius
• 透過 SVG clipPath 實現的裁剪圓角邊框

輸出預設使用 16×16 viewBox、透明背景和 currentColor。viewBox 是圖示的設計畫布；一個非預設的 .icon-name 框在應用其相對 top / left 偏移之前，會被置中在該畫布內。不要添加全局溢出覆蓋來隱藏幾何錯誤。該工具應用 VS 的 border-box 根模型，保持偽元素處於其 CSS 預設的 content-box 模型（除非明確覆蓋），將絕對定位的子元素相對於根內邊距框解析，展平簡單變形，並使用 2px/2px 的虛線邊框節奏。它會報告不支援的宣告，而不是隱藏它們。

護欄

• 在審查之前，將生成的輸出與正式圖示目錄分開存放。
• 未經 --force 參數，絕不覆蓋現有輸出。
• 批次轉換時，在 SVG 旁邊保留報告。
• 如果報告說 manual-review，請不要將結果描述為成功轉換。
• CSS 視覺等效性仍然是接受標準；轉換器故意採取保守策略。

CLI 參考

--css <file>       可重複的 CSS 輸入檔案。
  --icon <name>     不含 `icon-` 前綴的圖示類別後綴。
  --variant <name>  可選的修飾狀態，例如 `checked`。
--output <file>    SVG 輸出路徑。
--report <file>    可選的 JSON 報告路徑。
--size <number>    方形畫布尺寸；預設為 16。
--force            允許取代現有輸出。

有關實作細節和已識別的模式，請閱讀 references/css-patterns.md。