SVG Merge

深浅模式SVG合并工具

将深浅模式SVG合并为单个组件

上传浅色和深色两个SVG文件,自动提取颜色差异,生成支持深浅模式切换的TSX组件。 无需JavaScript处理,纯CSS变量实现,性能更优。

🧪 真实SVG测试 (initbuild图标)

使用public目录下的initbuild-light.svg和initbuild-dark.svg进行测试

自动颜色提取

智能识别SVG中的fill和stroke颜色,自动生成颜色映射

可视化编辑

直观的颜色映射编辑器,支持手动调整颜色和变量名

TSX组件生成

一键生成完整的React TSX组件,支持TypeScript类型

步骤1: 上传SVG文件

浅色模式 SVG

深色模式 SVG

步骤2: 配置组件