SVG to JSX Converter

⚡ 自动转换：stroke-width → strokeWidth、class → className、fill-rule → fillRule 等， 支持 React / Preact / Vue JSX。完全本地处理。

💡 提示：style 属性（如 style="fill:red"）在 JSX 中需要改为对象形式，本工具会保留字符串形式， 你可以手动改成 style={{ fill: 'red' }}。

What is SVG to JSX Converter?

This converter turns standard SVG markup into JSX you can drop straight into a React component. It converts kebab-case attributes to camelCase (stroke-width to strokeWidth, fill-rule to fillRule, clip-path to clipPath), maps class to className and for to htmlFor, outputs boolean attributes in JSX form, and strips XML declarations and DOCTYPE. Paste SVG in, get JSX out, copy it with one click. Everything is converted locally in your browser — your SVG never leaves your device. Built for React developers, frontend engineers, and design-system maintainers.

▶Use Cases5 scenarios
  • ◆Turning SVG exports from design tools into React components
  • ◆Migrating icon-library SVGs into a project
  • ◆Learning SVG vs JSX attribute differences
  • ◆Refactoring legacy inline SVG to JSX
  • ◆Generating React icon components for a design system
▶How to Use4 steps
  1. 1Paste your SVG markup into the input box
  2. 2Click Convert
  3. 3Review the JSX output on the right
  4. 4Copy and paste it into your React component
▶Features8 features
  • ✓Free
  • ✓No signup
  • ✓Automatic attribute conversion
  • ✓class to className mapping
  • ✓Boolean attribute support
  • ✓Strips XML declaration/DOCTYPE
  • ✓One-click copy
  • ✓Converted locally
▶FAQ7 questions
What is an SVG to JSX converter?

An online code conversion tool. Input: standard SVG markup. Output: JSX code ready for React components. It converts kebab-case attributes to camelCase (stroke-width to strokeWidth), maps class to className, handles boolean attributes, and strips XML declarations. Used by React developers to bring SVG icons and illustrations into their projects. Conversion happens locally — nothing is uploaded.

Which attributes are converted?

All kebab-case attributes become camelCase, e.g. stroke-width to strokeWidth, fill-rule to fillRule, clip-path to clipPath; class becomes className; for becomes htmlFor.

Does it handle boolean attributes?

Yes. Valueless attributes are output as {true} in JSX form, which is what React expects.

What gets removed?

XML declarations (<?xml ...?>) and DOCTYPE are stripped automatically, since they cause errors in JSX.

Can I use the output directly?

Yes. Copy the result and paste it into your React component's return statement — no manual attribute fixes needed.

Is my SVG uploaded?

No. Everything is converted locally in your browser; your SVG never leaves your device.

Which SVG features are supported?

Inline styles, gradients (defs, linearGradient, radialGradient), paths, groups, masks, and other standard SVG elements.