SVG 转 React/JSX 转换器

SVG 转 React JSX 计算器可以将原始 SVG 文件转换为可复用的 React 组件。它专为开发人员打造，用于获取更简洁的图标组件、品牌标识、产品插图和设计系统资产，无需手动修改每一个 SVG 属性。只需粘贴 SVG 标记或上传 UTF-8 编码的 .svg file，选择您需要的 React 选项，然后即可将生成的组件复制到您的项目中。

如何使用

1. 粘贴或上传 SVG。将完整的 SVG 文件粘贴到编辑器中，或上传 UTF-8 编码的 .svg 文件。
2. 命名组件。输入大驼峰式 (PascalCase) React 组件名称，例如 AlertIcon 或 BrandMark。
3. 选择 React 选项。选择 TypeScript、forwardRef、React.memo、title 无障碍支持、样式转换、安全过滤以及属性展开 (prop spreading) 选项。
4. 转换为 JSX。点击“转换为 React 组件”以生成可直接复制的 JSX 代码。
5. 检查并复制。在将生成的代码复制到您的 React 项目之前，检查转换摘要、警告提示和代码内容。

转换器处理的内容

获取更好 React SVG 组件的技巧

请尽可能保留原始的 viewBox，因为它控制着 SVG 的缩放方式。对于图标系统，设置 width="1em" 和 height="1em" 可以让图标继承文本大小，同时仍允许调用者通过 props 覆盖尺寸。使用具有描述性的大驼峰式 (PascalCase) 组件名称，在适当的时候通过 aria-hidden 保持装饰性 SVG 的无障碍性，并在需要传递信息的图标上使用 title prop。

常见问题

这个 SVG 转 React 转换器会改变什么？

它会解析 SVG XML 并将 SVG 属性重写为对 React 友好的 JSX，包括 className、驼峰式 SVG 属性、可选的样式对象、props、forwardRef、title 无障碍支持以及导出语法。

我可以上传 SVG 文件吗？

可以。您可以上传 UTF-8 编码的 .svg 文件或粘贴 SVG 标记。上传的文件将被读取为文本并在服务器上转换为 JSX。

它会过滤净化 SVG 代码吗？

默认启用安全过滤。转换器会移除 script 标签、内联事件处理程序和 javascript: 链接，使生成的组件在使用前审查时更加安全。

为什么要将 style 属性转换为对象？

在编写 JSX 时，React 要求 style prop 必须是一个对象。将样式字符串转换为对象可以使输出代码顺利编译，并保持 CSS 属性名称为驼峰式。

最合适的组件名称格式是什么？

使用大驼峰式 (PascalCase)，例如 AlertIcon 或 BrandMark。转换器会清除无效字符，并确保结果以有效的 React 组件标识符开头。