SVG to JSX / React Component Converter

Paste any SVG → get a clean React component with prop-forwarding and camelCase attributes

🔒 100% داخل الـ browser🆓 مجاني للأبد⚡ بدون تسجيل

ملاحظة: واجهة الأداة أدناه متاحة حالياً بالإنجليزية فقط. نحن نترجم الـ UIs تباعاً. شاهد هذه الأداة بالإنجليزية →

Component nameTypeScript typingReact.memo wrap

SVG source

React component

import * as React from "react";

export const Icon = React.memo((props: React.SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M12 2v20M2 12h20"/>
  </svg>
));

export default Icon;

طريقة الاستخدام

1
Paste SVG markup
Copy from Figma's dev mode, from an icon-library file, or paste raw <svg>…</svg>.
2
Pick component name and typing
Choose the component name, and JavaScript or TypeScript output.
3
Copy the component
Attributes are camelCased, style becomes an object, and props are forwarded to the root <svg>.

عن SVG to JSX / React Component Converter

Free SVG to JSX converter. Paste any SVG markup to get a clean React functional component with camelCased attributes, prop forwarding, and TypeScript typing. Ideal for turning icon exports from Figma, Sketch, or Illustrator into ready-to-use React components. SVG to JSX / React Component Converter على 712 Tools يعمل بالكامل داخل الـ browser الخاص بك باستخدام APIs الأصلية لـ JavaScript - لا يرى أي server بياناتك أبداً. أي: نتائج فورية، خصوصية كاملة، ولا حدود للرفع.

سواء كنت في جلسة debugging، أو مراجعة سريعة، أو حادثة إنتاج - هذه الأداة مجانية وبلا حد للاستخدام. لا علامات مائية، ولا تسجيل، ولا إعلانات داخل الأداة.

الأسئلة الشائعة

What gets transformed?

kebab-case attributes → camelCase (stroke-width → strokeWidth), class → className, style strings → objects, and the root <svg> forwards all props for size, color, and event handlers.

What about SVGO optimization?

This tool converts to JSX - for shrinking SVGs first, use the SVG Optimizer tool alongside it.

Is my SVG uploaded?

No. Conversion is pure string manipulation and runs entirely in your browser.

اقرأ المزيد

5 دقيقة قراءة

The SVG workflow that keeps your React bundle small

How to take a Figma export from 15KB to 400 bytes, convert it into a clean React component, and ship icons without a bloated icon library.

JSON to CSV

Convert JSON arrays to downloadable CSV

Timestamp Converter

Convert between Unix time, ISO 8601, and human-readable dates

Markdown to HTML

Convert Markdown to clean HTML with live preview

YAML ↔ JSON

Convert YAML to JSON and back with full syntax validation

JSON → TypeScript

Generate TypeScript interfaces or types from a JSON sample

Base Converter

Convert between binary, octal, decimal, and hexadecimal