Converting SVG markup for React means adapting XML-style attributes and inline styles to JSX conventions. TSX uses the same JSX syntax, but adds TypeScript’s file, compiler-configuration, and type-checking requirements.
What changes when SVG becomes JSX?
JSX is markup-like syntax embedded in JavaScript. React treats JSX attributes as keys in JavaScript objects, so some SVG and HTML spellings must change.
As an Amazon Associate I earn from qualifying purchases.
| 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. |
fill-rule="evenodd" |
fillRule="evenodd" |
SVG prop names use camelCase. |
aria-label="Search" |
aria-label="Search" |
ARIA attributes retain their dashed spelling. |
data-kind="icon" |
data-kind="icon" |
Data attributes retain their dashed spelling. |
xlink:href="#shape" |
xlinkHref="#shape" |
React uses a name without the colon for this namespaced attribute. |
style="fill: red; stroke-width: 2" |
style={{ fill: 'red', strokeWidth: 2 }} |
The React style prop takes an object with camelCase CSS property names. |
React also documents corresponding forms for other xml:* and namespace attributes. Check the applicable React DOM reference for any less common attributes in your SVG. These examples cover syntax changes, not a guarantee that every SVG construct converts correctly without review.
How does TSX differ from JSX?
TSX is TypeScript source that contains JSX. It keeps the same JSX attribute conventions; the differences are in the file extension, compiler setup, and type checking.
#1 Best Overall
File and compiler configuration
Put JSX-containing TypeScript in a .tsx file and enable TypeScript’s jsx compiler option. The selected mode affects whether JSX is preserved or transformed and what output is produced. Modes documented by TypeScript include preserve, react, react-jsx, react-jsxdev, and react-native. Use the mode configured for your project rather than assuming one universal output.
Attribute and component checking
TypeScript checks lowercase intrinsic elements such as SVG tags through JSX element definitions. For value-based elements such as React components, it checks attributes against the component’s props typing. React typings provide the JSX definitions used for React. As a result, the props interface you choose determines which attributes callers can pass to a reusable SVG component.
Convert an SVG and review the component
- Choose how to use the artwork. Keep it as an external image if it only needs to be displayed as a static asset; convert it to inline JSX when it needs inline styling or component-level behavior. React does not require every SVG to become a component.
- Convert the markup. Change names such as
classandstroke-widthto their JSX forms, retain dashedaria-*anddata-*attributes, and convert namespaced attributes such asxlink:hrefto React’s documented spelling. - Convert inline styles. Replace an SVG style string with an object for the React
styleprop, using camelCase CSS property names. - For TSX, check the project setup. Confirm the source file has a
.tsxextension, the TypeScriptjsxoption is enabled, and the project has the React typings it uses. - Design the component API. Decide deliberately whether callers should be able to pass values such as
className, sizing, or event handlers. There is no single required prop signature for an SVG wrapper. - Check the rendered result and accessibility. Choose a meaningful accessible name or a decorative treatment according to the icon’s purpose and surrounding content. The right treatment depends on context; syntax conversion alone does not decide it.
React recommends using a converter for existing HTML and SVG, while noting that understanding the JSX conventions is useful. A converter can handle routine syntax edits, but inspect the resulting markup and component behavior in your target React and TypeScript setup.
Free tools Windows power users keep installed
One-click scans. No signup required.
Which should you use: JSX or TSX?
| Consideration | JSX | TSX |
|---|---|---|
| Project language | JavaScript project using JSX | TypeScript project containing JSX |
| Source file | JavaScript file with JSX, according to the project setup | .tsx |
| Configuration | Use the project’s existing JSX build setup | TypeScript jsx option must be enabled; its mode affects output |
| Attribute checking | No TypeScript JSX attribute checking | Intrinsic SVG attributes and component props are checked through JSX types |
Choose based on the language and build pipeline already used by the codebase. TSX is useful when typed component props and attribute checking fit the project; the SVG’s visible JSX syntax does not otherwise change just because the file is TypeScript.
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.
