How do I camelCase SVG attributes for React Native?

Paste SVG and click CamelCase attributes to rewrite names like stroke-width to strokeWidth.

Why does React Native need camelCase?

JSX props are camelCased; hyphenated SVG attributes are invalid as JS identifiers.

Use Convert SVG Attributes to React Native Props.

FAQ

Quick answers

How do I camelCase SVG attributes for React Native?: Paste SVG and click CamelCase attributes to rewrite names like stroke-width to strokeWidth.
Why does React Native need camelCase?: JSX props are camelCased; hyphenated SVG attributes are invalid as JS identifiers.
Want a broader attribute-to-prop conversion?: Use Convert SVG Attributes to React Native Props.
Does camelCasing upload my SVG?: No — free, local.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B