لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

مُحول SVG إلى مكون React JSX

مطورنص

إعلان · حذف؟

مدخل

عملية تلقائية

انتاج

جانب العميل

إعلان · حذف؟

مرشد

مُحول SVG إلى مكون React JSX

Paste raw SVG markup and get a clean React functional component back. The tool applies deterministic camelCase conversion for every attribute, drops non-JSX syntax, and wraps the output in a ready-to-import component — optionally typed, optionally forwardRef-wrapped, and optionally resized via props. Everything runs locally in your browser, so your icons and logos never leave your machine.

كيفية استخدام

Paste the full <svg>…</svg> markup into the input box.
Set a component name (PascalCase, like ArrowRightIcon).
Toggle TypeScript, forwardRef, scalable size props, and prop spreading to fit your project.
Copy the generated JSX or download it as a .tsx / .jsx ملف.

خصائص

camelCase attributes 0–9 (top row) stroke-width يتحول إلى strokeWidth, fill-rule يتحول إلى fillRule, and so on across the full SVG spec.
Reserved word handling 0–9 (top row) class is rewritten to className, for ل htmlForو، و xlink:href ل xlinkHref.
Inline style parser 0–9 (top row) style="color: red; font-size: 12px" is converted to a JSX style object with camelCase keys.
TypeScript output – generates React.SVGProps<SVGSVGElement> typings when enabled.
Scalable icon mode – swap the hard-coded width/height for width و height props with sensible defaults.
forwardRef wrapper – emit a React.forwardRef component with a displayName for DevTools.
Prop spreading – forward arbitrary props onto the root <svg> so consumers can set className, ARIA, or event handlers.
Offline by design – the SVG never leaves the browser; no uploads, no server round-trips.

 التعليمات

Why do React and JSX rewrite SVG attribute names?

JSX compiles directly to JavaScript object property access, and JavaScript identifiers cannot contain hyphens. React therefore standardizes on camelCase property names that mirror the DOM IDL — for example, stroke-width يتحول إلى strokeWidth because the DOM exposes it as element.strokeWidth. A handful of attributes (class, for) collide with JavaScript reserved words and are renamed (className, htmlFor) to avoid parser conflicts.
What does React.forwardRef do for an SVG component?

By default, a functional component cannot receive a ref from its parent — React silently ignores it. React.forwardRef exposes the underlying DOM node to the parent, which is essential when you need direct access to the rendered <svg> for focus management, measurement, or integration with animation libraries like Framer Motion or GSAP.
Why should SVGs be embedded as React components instead of inline images?

Embedding SVG as JSX gives you full control over the DOM tree: you can theme strokes and fills via CSS variables, animate individual paths, swap colors at runtime, and tree-shake unused icons at build time. An <img src="icon.svg"> behaves as an opaque raster-like element — you cannot style its internals from the host page.
Why keep width and height as props rather than hard-coded attributes?

Hard-coded pixel dimensions pin the icon at a single size and make it awkward to compose inside a layout. Exposing width و height as props (often paired with the original viewBox) lets consumers render the same component at 16px in a toolbar and 48px in a hero banner, with SVG's vector scaling preserving crispness at every size.