GitRuozhi/CSS到SVG转换器

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 模型（除非明确覆盖），根据根 padding 盒解析绝对定位子元素，展平简单变换，并使用 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。