What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To use SVG markup as a React component, convert its XML-style attributes to JSX conventions: use className instead of class, camelCase most SVG attribute names, and express inline styles as JavaScript objects. For TypeScript, put JSX in a .tsx file and check that the project has an appropriate TypeScript jsx setting. A converter can handle routine changes, but you still need to review the component’s props, rendering, and accessibility.
Convert SVG markup to JSX
JSX is markup-like syntax embedded in JavaScript. React treats JSX attributes as keys in JavaScript objects, so some SVG and XML spellings need to change. React recommends using a converter for existing SVG or HTML, while also encouraging developers to understand the conventions in the generated JSX.
| SVG or XML | JSX | Reason |
|---|---|---|
class="icon" |
className="icon" |
React uses className for the class prop. |
stroke-width="2" |
strokeWidth="2" |
Most SVG prop names use camelCase in React. |
fill-rule="evenodd" |
fillRule="evenodd" |
Convert the hyphenated name to camelCase. |
aria-label="Search" |
aria-label="Search" |
ARIA attributes keep their dashed spelling. |
data-kind="icon" |
data-kind="icon" |
Data attributes keep their dashed spelling. |
xlink:href="#shape" |
xlinkHref="#shape" |
React’s documented namespace form omits the colon. |
React documents similar namespace mappings for XML attributes. Check the applicable React DOM component reference when converting less common names rather than assuming every colon-separated attribute should be handled identically.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Convert inline styles to objects
SVG markup may use a string for its style attribute, but React’s style prop takes an object. CSS property names in that object use camelCase:
#1 Best Overall
<path style={{ fill: 'red', strokeWidth: 2 }} />This corresponds to SVG markup such as style="fill: red; stroke-width: 2". Keep JSX expression braces and the JavaScript object braces balanced when copying the example into a component.
What changes in TSX?
TSX is TypeScript source that contains JSX. The JSX syntax conversions remain the same; the additional concerns are the file extension, compiler configuration, and type checking.
- File: use the
.tsxextension for a TypeScript file containing JSX. - Compiler: ensure TypeScript’s
jsxcompiler option is enabled and matches the project’s build setup. - Emit mode: TypeScript supports
preserve,react,react-jsx,react-jsxdev, andreact-native. The selected mode determines how JSX is handled in compiler output, so follow the project’s existing configuration instead of choosing a mode by habit.
How TypeScript checks SVG elements and components
TypeScript checks lowercase intrinsic JSX elements, such as SVG tags, using the applicable JSX element definitions. It checks value-based elements—components whose names begin with a capital letter—against the component’s props typing. React’s type definitions provide JSX definitions used for React elements.
That distinction matters when you wrap SVG in a reusable component: callers are checked against the props API you define. You might expose a className, sizing, or event-handler prop, but there is no single required wrapper signature. Choose an API that fits the project and type it deliberately.
Choose inline JSX or an external SVG
Not every SVG needs to become a React component. Keep it as an external image when the artwork is static and does not need inline styling, behavior, or component-level props. Inline it when the component needs to expose a deliberate API or when the SVG’s markup must participate directly in the JSX.
The React and TypeScript guidance here explains JSX syntax and typing, not bundler-specific SVG import behavior. How an external SVG should be referenced depends on the application’s build tooling; check that toolchain’s documentation before choosing an import pattern.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.A practical conversion and review workflow
- Choose the form: decide whether the SVG should remain an external image or become inline JSX based on whether it needs inline styling, behavior, or component props.
- Convert the markup: use a converter for routine translation if useful, then check attributes such as
class, hyphenated SVG names, namespace forms, andstyle. - Set up TSX if needed: use a
.tsxfile and confirm the project’s TypeScriptjsxoption and React typings. - Define the component API: decide which props callers should be able to set, and type those props for a TSX component.
- Check it in context: verify the rendered result and choose an accessibility treatment that matches the SVG’s purpose and surrounding content.
Review accessibility rather than relying on conversion
Syntax conversion does not decide whether an SVG is meaningful content or decorative. For an icon that communicates information, provide an accessible name appropriate to its purpose. If it is decorative and the surrounding content already conveys what matters, treat it accordingly in the rendered interface. The right choice depends on context; no single accessibility treatment applies to every SVG.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
