SVG 路径提取 纯前端 · 免登录

SVG 路径提取工具使用说明

从设计稿或图标库拿到 SVG 后，前端通常需要把图形抽出来封装成组件，而不是整段内联。本工具自动解析 path 的 d 数据以及 circle / rect / polygon 等基础图形，按 viewBox 重新组装成可复用的图标组件。

颜色统一为 currentColor：把写死的填充色换成 currentColor，让图标跟随父级文字颜色自动变色，这是组件化图标的标准做法；需要保留原始配色时可取消勾选。

组件名会自动转为大驼峰（PascalCase），React 输出带 SVGProps 类型与属性透传，Vue 输出单文件组件模板部分，原生 HTML 可直接嵌入页面。全程浏览器本地解析，不上传内容。