⟲

Code Transformer & LLM Sanitizer

transform.ignlab.net

100% Local Processing • Zero Data Transmitted • Safe for Proprietary Code
Mode
AI Safeguard {{ redactions.length }} redacted
Indent
No history yet — copy or download a result to save it here.
Source {{ activeMode.from }} detected: {{ detectedLabel }}
Drop file to load…
{{ inputGutter }}
{{ inputError }} {{ stats.in.lines }} lines · {{ stats.in.chars }} chars · {{ stats.in.bytes }}
Output {{ activeMode.to }} 
{{ output }}{{ outputError ? '' : 'Transformed output appears here…' }}
⚠ {{ outputError || copyError }} {{ stats.out.lines }} lines · {{ stats.out.chars }} chars · {{ stats.out.bytes }}
🛡 Sanitizer redacted {{ redactions.length }} sensitive item{{ redactions.length===1?'':'s' }} before transforming
{{ r.name }} ×{{ r.count }}

SVG to React JSX Converter

Paste raw SVG markup — an icon exported from Figma or a design library — and get a React functional component back, props spread onto the root so you can pass className, onClick, or fill straight through.

How to use it

  1. Paste your source into the panel — or click Sample to see it work instantly.
  2. The SVG to React JSX mode is pre-selected for you.
  3. Copy or download the result — nothing is ever uploaded, it's all done locally in your browser.

Frequently asked questions

What gets renamed for JSX compatibility?

class becomes className, kebab-case attributes (stroke-width) become camelCase (strokeWidth), and xlink:href becomes href.

Are inline styles converted?

Yes, a style="..." string attribute is converted into a JSX style={{ ... }} object with camelCased CSS properties.

Can consumers pass their own props?

Yes — {...props} is spread onto the root element so size, color and event handlers all pass through normally.

Need a different conversion? Browse all conversions, sanitize secrets with AI Safeguard, or read the guides.