SVG icons are everywhere in modern front-end development. They power navigation menus, buttons, alerts, dashboards, logos, and status indicators across nearly every React application. They scale beautifully, stay sharp on any screen, and are easy to style. So it often feels natural to grab an SVG from a design file or icon library, paste it into a React component, and move on.

Then React throws errors. Or the icon renders incorrectly. Or styling refuses to work.

That moment is what this article is about.

In this post, we will look at why SVG icons are so popular, why developers often copy raw SVG directly into React components, and why that approach sometimes breaks. We will also walk through the differences between normal HTML-style SVG attributes and JSX attributes, explain why camelCase matters in React, and show how converting SVGs into JSX components makes icon reuse far more efficient.

SVG icons are popular for good reason

SVG stands for Scalable Vector Graphics. Unlike raster images such as PNG or JPG, SVGs are based on vectors, which means they can scale up and down without losing sharpness.

For icons, SVG is an ideal choice.

Developers love SVG icons because they offer several practical advantages:

They stay crisp on all screen sizes and resolutions
They are usually lightweight
They can be styled with CSS
Their colors can often be changed easily
They can be animated
They fit naturally into component-based UI development

In React applications, where interface pieces are broken into reusable components, SVG icons fit especially well. A search icon, a menu icon, a close icon, or a warning icon can all serve as standalone UI elements.

Why developers often paste SVG directly into React

This usually starts with speed.

A developer gets an icon from:

Figma
an icon library
a designer-exported SVG file
a website that provides raw SVG markup

The SVG looks something like this:

<svg

width="24"

height="24"

viewBox="0 0 24 24"

fill="none"

stroke="black"

stroke-width="2"

>

</svg>

A developer may think, “This is just markup. I can paste it right into my component.”

That is a reasonable assumption, especially because JSX looks very similar to HTML.

But JSX is not HTML. It is JavaScript syntax used to describe UI. And that difference is exactly where many SVG issues begin.

Why some raw SVG icons fail in React

The short version is this: Raw SVG markup is usually written using standard HTML or XML-style attributes, while React expects JSX-compatible attribute names.

That mismatch causes most SVG problems in React.

Some of the most common issues include:

1. Attribute names are not React-compatible

Many SVGs use dashed attribute names like:

stroke-width
stroke-linecap
fill-rule
clip-rule

These are valid in raw SVG files, but not in JSX. React expects them in camelCase:

strokeWidth
strokeLinecap
fillRule
clipRule

If you paste the raw version directly into a React component, you may see warnings or broken rendering.

2. `class` must become `className`

In plain HTML or SVG, you use class. In React JSX, you must use className.

So this:

must become:

This is one of the most common copy-paste mistakes.

3. Inline styles must be objects

Raw SVG or HTML sometimes uses inline style strings:

In JSX, styles must be passed as JavaScript objects:

4. Some attribute names clash with JavaScript conventions

Because JSX is JavaScript-based, React uses naming conventions that align with DOM property names rather than plain HTML text attributes.

This is why attributes like tabindex become tabIndex, and SVG follows the same pattern.

5. Copy-pasted SVG often includes unnecessary metadata

SVGs exported from design tools can include extra tags, IDs, namespaces, comments, and attributes that are not needed inside a React component. These do not always break the icon, but they can make the component harder to read, reuse, and maintain.

JSX is not HTML, even when it looks like it

This is the part that trips up many developers.

JSX looks like HTML:

<div>Hello</div>

But under the hood, JavaScript syntax is transformed into React element calls.

That means attribute names are not interpreted exactly the way a browser would interpret raw HTML or SVG in a standalone file.

React expects JSX attributes to match JavaScript-friendly DOM property conventions. That is why many raw SVG attributes need to be renamed.

So when an SVG works perfectly in an .svg file but fails after being pasted into a React component, the problem is usually not the SVG itself. The problem is that the markup has not been translated into JSX.

Incorrect SVG usage in React

Here is a common example of raw SVG pasted directly into a React component.

function ArrowIcon() {

return (

<svg

width="24"

height="24"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

stroke-width="2"

class="arrow-icon"

>

<path

stroke-linecap="round"

stroke-linejoin="round"

d="M5 12h14"

/>

<path

stroke-linecap="round"

stroke-linejoin="round"

d="M12 5l7 7-7 7"

/>

</svg>

);

}

At first glance, this looks fine. But it contains several React problems:

stroke-width should be strokeWidth
class should be className
stroke-linecap should be strokeLinecap
stroke-linejoin should be strokeLinejoin

This is the kind of SVG that may trigger warnings or fail to behave properly in a React app.

Correct JSX version of the same SVG

Here is the React-ready version:

function ArrowIcon() {

return (

<svg

width="24"

height="24"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

strokeWidth="2"

className="arrow-icon"

>

<path

strokeLinecap="round"

strokeLinejoin="round"

d="M5 12h14"

/>

<path

strokeLinecap="round"

strokeLinejoin="round"

d="M12 5l7 7-7 7"

/>

</svg>

);

}

Now the SVG follows JSX rules and works properly inside React.

HTML attributes vs JSX attributes

This difference is worth understanding clearly, because it applies far beyond SVGs.

In standard HTML or XML-based SVG, attributes are usually written as lowercase or hyphen-separated names.

Examples:

stroke-width

fill-rule

clip-path

class

tabindex

In JSX, many of these must be written in JavaScript-style property form:

strokeWidth

fillRule

clipPath

className

tabIndex

Here are a few common SVG conversions developers run into:

Raw SVG / HTML Attribute	JSX Version (React)
`class`	`className`
`stroke-width`	`strokeWidth`
`stroke-linecap`	`strokeLinecap`
`stroke-linejoin`	`strokeLinejoin`
`fill-rule`	`fillRule`
`clip-rule`	`clipRule`
`stop-color`	`stopColor`
`stroke-miterlimit`	`strokeMiterlimit`
`xmlns:xlink`	`xmlnsXlink`
`xlink:href`	`xlinkHref`

That naming pattern is not random. It follows the JavaScript DOM property style React uses.

Why camelCase is required in JSX

React uses camelCase because JSX maps more naturally to JavaScript object properties and DOM APIs.

Think about a style object in React:

Those property names are camelCased because they are JavaScript object keys, not plain CSS text.

React applies the same idea to many element attributes. Since JSX uses JavaScript syntax, camelCase keeps attribute names consistent with DOM property naming and JavaScript conventions.

That is why React expects:

strokeWidth

instead of:

stroke-width

So when developers ask, “Why does React care so much about camelCase?” the answer is simple: Because JSX is JavaScript-first, not raw HTML-first.

Why converting SVG into JSX components is worth it

Once an SVG is properly converted to JSX, it becomes much more than just markup. It becomes a reusable React component.

That has real benefits.

Reusability

Instead of pasting the same SVG into multiple files, you can create one icon component and reuse it everywhere:

function ArrowIcon() {

return (

<svg

width="24"

height="24"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

strokeWidth="2"

>

</svg>

);

}

Then use it anywhere:

Next <ArrowIcon />

</button>

Customization through props

A JSX icon component can accept props for size, color, class names, or accessibility settings.

function ArrowIcon({ size = 24, color = 'currentColor', className = '' }) {

return (

<svg

width={size}

height={size}

viewBox="0 0 24 24"

fill="none"

stroke={color}

strokeWidth="2"

className={className}

>

</svg>

);

}

Usage:

That is much cleaner than maintaining multiple versions of the same SVG.

Easier styling

When SVGs become components, you can style them consistently across your app. You can also use currentColor so icons automatically inherit text color from their parent element.

function SearchIcon() {

return (

<svg

width="20"

height="20"

viewBox="0 0 24 24"

fill="none"

stroke="currentColor"

strokeWidth="2"

>

</svg>

);

}

Then the icon color changes naturally with the surrounding text styles.

Better maintainability

A well-structured icon component library is easier to maintain than scattered copy-pasted SVG code across dozens of files.

If you want to update stroke width, accessibility settings, or sizing patterns, you can do so once and keep your UI consistent.

A practical pattern for reusable icon components

Many teams eventually settle on a pattern like this:

function IconWrapper({ children, size = 24, className = '', ...props }) {

return (

<svg

width={size}

height={size}

viewBox="0 0 24 24"

fill="none"

className={className}

{...props}

>

{children}

</svg>

);

}

function CheckIcon(props) {

return (

</IconWrapper>

);

}

This kind of setup makes icons predictable, reusable, and easy to extend.

Why automated conversion tools help

Manually converting SVG code works, but it is repetitive and error-prone, especially when you are working with a large icon set.

That is where automated tools become useful.

A tool like Plaisha SVG to JSX Transformer helps developers automatically convert raw SVG markup into React-ready JSX components. Instead of hunting down every stroke-width, fill-rule, class, or namespaced attribute by hand, the transformer handles those changes for you and prepares the icon for direct use in a React project.

That saves time, reduces mistakes, and makes it easier to build a reusable icon system.

For teams that work with many custom icons, this kind of tooling can remove a lot of friction from the workflow.

The bigger lesson

When SVG icons fail in React, the issue is usually not React being difficult or SVG being broken. It is simply a mismatch between two formats:

raw SVG markup
JSX syntax

React needs SVG code to follow JSX rules. That means correcting attribute names, using camelCase, and replacing class with className, and turning the icon into a proper component when reuse matters.

Once that conversion happens, SVG icons become one of the cleanest and most flexible ways to build scalable UI.

Final thoughts

SVG icons are popular because they are sharp, lightweight, and flexible. React developers often paste them directly into components because it feels fast and convenient. But raw SVG does not always translate cleanly into JSX.

That is why some icons fail.

The fix is understanding that JSX is not plain HTML. Attribute names must follow React conventions, and camelCase is a key part of that. Once converted properly, SVGs become reusable components that are easier to style, maintain, and scale across an application.

For developers who want to skip repetitive cleanup work, Plaisha SVG to JSX Transformer is a practical way to automatically convert raw SVG into React-ready components, making icon workflows much smoother.

When you treat SVGs as components instead of pasted markup, your React codebase becomes cleaner, more reusable, and much easier to work with.