Overview
Convert raw SVG markup into a ready-to-paste component for React (TypeScript or JavaScript), Vue 3, or Svelte. Attribute names are converted for JSX, a currentColor option makes the icon themeable, and the component accepts size and className props.
How It Works
Paste the SVG markup into the left editor, type a component name (letters, digits, and underscores only), and pick the target framework. Enable the currentColor option to retheme strokes with the surrounding text color. The generated component appears on the right with a copy button. For React targets the output is a typed function component whose width and height come from a size prop with className and remaining SVG props forwarded.
Step-by-Step Usage Guide
- Paste your SVG markup into the left editor.
- Enter the component name and pick React TS, React JS, Vue 3, or Svelte.
- Toggle currentColor if you want the icon to inherit text color.
- Copy the generated component into your project and fix any framework-specific attributes.
Technical Specifications & Standards
The converter performs JSX-safe attribute rewriting on a whitelist: class becomes className, and the kebab-case SVG attributes stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-dasharray, stroke-dashoffset, stroke-opacity, fill-rule, clip-rule, fill-opacity, stop-color, and stop-opacity become their camelCase equivalents. Attributes outside that list, such as xlink:href or xml:space, pass through unchanged and may warn in React, so check the output for them. The currentColor option replaces the first stroke attribute only, not fill and not every occurrence, which suits single-stroke icons from the common icon sets. The React TypeScript template declares a props interface extending SVGProps<SVGSVGElement> with a size prop defaulting to 24, spreads the remaining props onto the svg element, and provides a default export. Two framework caveats: the Vue template keeps the converted className, which Vue templates do not style as a class, and the Svelte template receives the same rewrite, so both may need class restored by hand; Vue also accepts kebab-case attributes natively, so the rewrite there is harmless but unnecessary.
Targeted Use Cases
- Turning an exported Figma or Illustrator icon into a reusable React component.
- Making an icon set themeable by routing strokes through currentColor.
- Converting a hand-drawn SVG into a typed component that accepts size and className.
- Preparing brand marks for a component library across multiple frameworks.
Notes & Gotchas
- Keep the viewBox intact when converting; the size prop changes width and height, not the coordinate system.
- Scan the output for attributes the whitelist does not cover, such as xlink:href, before using it in React.
- Fix className to class when generating for Vue or Svelte.
- Use currentColor instead of hardcoding fill or stroke colors in shared icon components.
Frequently Asked Questions
Why does my icon not change color with currentColor on?
The option replaces only the first stroke attribute in the markup. If your icon colors with fill, or has multiple stroke attributes, adjust the remaining color attributes to currentColor by hand.
Does the Vue or Svelte output compile as-is?
The SVG markup is shared across frameworks after a React-oriented rewrite, so Vue and Svelte templates can contain className where their convention is class. Restore class before using those outputs.
What does the size prop do?
In the React templates, width and height are bound to the size prop, which defaults to 24, while the viewBox stays unchanged so the icon scales cleanly. Other SVG props pass through untouched.
Are all SVG attributes converted for JSX?
Only a whitelist of the most common kebab-case attributes is rewritten. Anything else, like namespaced attributes, is left as written and may produce a React warning.