将深浅模式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文件到这里,或点击选择文件
仅支持 .svg 格式
深色模式 SVG
拖拽SVG文件到这里,或点击选择文件
仅支持 .svg 格式