主题色图标
输入
带固定蓝色 fill 和 width/height 的 SVG 图标
输出
使用 currentColor、继承 SVG props 的响应式 TSX 组件
AppHelp
把 SVG 转成可复用的 React 或 TypeScript 组件
粘贴或打开 SVG，把 XML 属性和内联样式转换为 JSX，再配置 TypeScript props、响应式尺寸、currentColor、标题与描述、React.memo、forwardRef、props 位置和导出方式，并在本地预览导出。
SVG 转 React 组件工作台
把 SVG 属性转成 JSX，添加可复用 React props，检查安全预览，并在本地导出 JSX 或 TypeScript。
1. 输入 SVG
2. 组件设置
常见任务
- SVG 转 JSX
- SVG 转 React
- SVG 转 TSX
- React SVG 组件生成器
- 在线 SVG 转 JSX
- SVG 转 TypeScript React
- React 图标转换
- 本地 SVG 转组件
- 免费 SVG 转 React
快速答案
粘贴 SVG 代码或打开 .svg 文件，设置组件名并选择 JSX 或 TypeScript。AppHelp 会把 class、带连字符的 SVG 属性、xlink 引用和内联 CSS 转成 React 语法；还能移除固定尺寸、把固定填充和描边替换为 currentColor、增加 title/description props、展开 SVG props、转发 ref、使用 React.memo，并在本地导出命名或默认组件。
使用步骤
- 1. 粘贴或打开可信 SVG输入 SVG 代码或选择小于 2 MB 的文件。脚本、嵌入 HTML、事件处理器和外部引用会从生成结果与预览中移除。
- 2. 设置组件名和类型输入 PascalCase 组件名；项目需要 React.SVGProps 类型时启用 TypeScript。
- 3. 选择复用行为按代码库约定设置响应式尺寸、currentColor、标题或描述、memo、ref 转发、props 展开位置和导出方式。
- 4. 检查、格式化并测试复制或下载组件，运行仓库格式化、lint 和构建，再在真实应用中测试尺寸、主题颜色、焦点和无障碍名称。
示例
无障碍插画
输入
在某些页面具有语义的 SVG
输出
带可选 title 和 description props 的组件
调用端仍需决定提供无障碍名称，或把装饰图标标记为 aria-hidden。
设计系统基础组件
输入
在多个交互控件中复用的 SVG
输出
带类型、ref 转发、memo 和末尾 caller props 的组件
常见场景
- 把导出的图标变成 React 或 Next.js 可复用组件
- 为设计系统或图标库创建 TypeScript SVG 组件
- 让固定色图标通过 currentColor 继承文字颜色
- 移除固定宽高并保留基于 viewBox 的响应式尺寸
- 为具有语义的 SVG 增加可控 title 和 description
注意事项
- 生成代码只是起点，不能替代目标仓库的格式化、lint、构建、视觉测试和无障碍审查。
- 把所有固定 fill 和 stroke 替换成 currentColor 会破坏有意的多色图稿；插画和 Logo 应关闭该选项。
- 响应式尺寸需要正确 viewBox；没有 viewBox 时移除宽高可能导致组件塌陷或缩放错误。
- props 放在末尾允许调用端覆盖生成属性；放在开头则由生成属性覆盖调用端，应按设计系统约定选择。
- title 元素不能自动满足所有无障碍场景；调用端仍需在有意义命名和 aria-hidden 装饰处理之间做决定。
- 工具会移除脚本、嵌入 HTML、事件处理器和外链，但不可信 SVG 仍需要更广泛的供应链和内容安全检查。
- 复杂 CSS、动画、命名空间、滤镜、字体或设计工具专用特性可能需要手工调整组件。
功能特点
- 把 SVG XML 属性转换为 React camelCase 与 className 语法
- 把内联 CSS 声明转换为 JSX style 对象
- 输出 JavaScript JSX 或带 React.SVGProps 类型的 TypeScript
- 移除固定尺寸并在缺少 viewBox 时提示
- 可用 currentColor 替换固定颜色，同时保留渐变和 none
- 可选无障碍 title 与 description props
- 支持 React.memo、forwardRef、props 位置和命名/默认导出
- 安全预览、不上传，可复制和下载组件
常见问题
- SVG 转 JSX 会修改哪些内容？
- React 使用 className 替代 class，许多连字符属性要改成 camelCase，内联 style 使用对象，动态值使用 JavaScript 表达式；转换器会完成这些结构变化。
- 可以生成 TypeScript React 组件吗？
- 可以。启用 TypeScript 后，props 会继承 React.SVGProps<SVGSVGElement>，选择标题或描述时还会增加相应可选字段。
- SVG 组件中的 currentColor 有什么作用？
- currentColor 会让 fill 或 stroke 继承 CSS color，适合可换主题的单色图标；有意的多色图稿应关闭。
- SVG props 应该放在开头还是末尾？
- 放在末尾时调用端可以覆盖生成属性；放在开头时生成属性优先，具体取决于设计系统约定。
- 什么时候使用 forwardRef 或 React.memo？
- 调用端需要底层 SVG 元素时使用 forwardRef；只有性能分析或组件行为确实需要时才使用 memo，它并非通用性能优化。
- 生成的 SVG 组件自动满足无障碍要求吗？
- 可选 title 和 description 提供基础能力，但调用场景仍需决定图形是否有语义、如何标注、是否可聚焦，或用 aria-hidden 标记为装饰。
- SVG 和生成代码会上传吗？
- 不会。解析、预览、转换、复制和下载都在浏览器本地完成。