How do I change SVG stroke color in React?

Paste the SVG, click Apply + copy React, put the markup in a component, and pass color via style or className as in the snippet.

stroke or strokeWidth in JSX?

React uses camelCase DOM props (stroke, strokeWidth). currentColor still works the same as in HTML.

Use Change SVG Stroke Color Tailwind for stroke-current utility patterns.

Open Change SVG Stroke Color with CSS.

FAQ

Quick answers

How do I change SVG stroke color in React?: Paste the SVG, click Apply + copy React, put the markup in a component, and pass color via style or className as in the snippet.
stroke or strokeWidth in JSX?: React uses camelCase DOM props (stroke, strokeWidth). currentColor still works the same as in HTML.
Prefer Tailwind classes in React?: Use Change SVG Stroke Color Tailwind for stroke-current utility patterns.
Need a plain CSS recipe?: Open Change SVG Stroke Color with CSS.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B