SVG转JSX转换器 - SVG转React组件在线

即时将SVG标记转换为React JSX、TSX或React Native组件。优化SVG属性，生成可复制的React代码。

常见问题

什么是SVG转JSX转换器？

SVG转JSX转换器将标准SVG标记转换为React应用程序可以使用的JSX语法。这包括将class转换为className，将连字符属性更改为驼峰命名法（例如，stroke-width变为strokeWidth），以及将内联样式转换为JavaScript对象。

为什么需要将SVG转换为JSX用于React？

React使用JSX，它与标准HTML有不同的语法要求。像class和stroke-width这样的SVG属性需要转换为className和strokeWidth。内联样式必须变成JavaScript对象。如果不转换，React会抛出警告或错误。

如何将SVG转换为JSX？

只需将您的SVG代码粘贴到输入框中，或拖放SVG文件。转换器会自动将其转换为有效的JSX。然后您可以将输出直接复制到React组件中。可选地，启用包装为组件选项以生成完整的React组件。

SVG优化有什么作用？

SVG优化会从您的SVG文件中删除不必要的数据，包括编辑器元数据（来自Illustrator、Figma或Sketch等工具）、XML声明、注释和空属性。这可以在不影响SVG外观的情况下减小文件大小。

我的SVG数据安全吗？

是的，绝对安全。此工具在您的浏览器中处理所有内容——您的SVG代码永远不会离开您的计算机。没有服务器上传，没有数据收集，也没有外部API调用。这使得它可以安全地用于专有图标和敏感的设计资产。

可以为React Native转换SVG吗？

可以！选择React Native选项卡以生成与react-native-svg库兼容的代码。这会将SVG标签转换为其React Native等效项（例如，svg变为Svg，path变为Path），并相应地调整属性。

支持TypeScript吗？

支持。选择TSX选项卡以生成带有TypeScript接口的正确类型的React组件。生成的组件将包含正确的FC（Function Component）声明和prop类型。

代码示例

// SVG to JSX attribute conversion
const svgAttrToJsx = {
  'class': 'className',
  'stroke-width': 'strokeWidth',
  'fill-rule': 'fillRule',
  'clip-path': 'clipPath',
};

// Convert hyphenated to camelCase
const toCamelCase = (str) =>
  str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());

// Example usage
const attr = 'stroke-width';
const jsxAttr = svgAttrToJsx[attr] || toCamelCase(attr);
console.log(jsxAttr); // 'strokeWidth'

SVG转JSX转换器 - SVG转React组件 在线