SVG to React Native
Convert SVG to a react-native-svg component: every tag mapped to its capitalized equivalent, attributes camelCased, the import line generated from what the file actually uses, and width/height exposed as props.
Needs react-native-svg installed. The import line is built from the tags your file uses.
How it works
react-native-svg has no DOM, so every tag is mapped to its component — <path> to <Path>, <g> to <G> — attributes are camelCased, and the import line is generated from the tags your file actually uses. The root becomes <Svg> with width and height exposed as props (defaulting to the file's intrinsic size) and a spread for everything else. Whatever has no equivalent — class attributes, style strings, DOM event handlers, unsupported elements — is dropped and listed next to the output, so nothing disappears silently.
When to use it
Sharing an icon set between a web app and a React Native app, or bringing designer- exported SVGs into an RN project without hand-translating tags. Optimize first — the Optimizer's output converts cleaner, with fewer groups and no editor cruft to drop.
Common problems
- Nothing renders.
react-native-svgmust be installed and linked in the project; the import line assumes it. - The conversion dropped something you needed. Filters, masks with alpha, CSS animations and
<style>blocks have partial or no support. What was removed is listed; effects usually need rebuilding as props or flattening before conversion. - Text renders in the wrong font. Font files must be bundled with the app and referenced by
fontFamily. For wordmarks, convert to outlines with Text to Path before converting.
Notes
- Requires
react-native-svgin the project:npm install react-native-svg. - CSS has no reach inside React Native, so class attributes and style strings are dropped — anything they carried must become props or presentation attributes first.
- Filters, masks and animation elements have partial or no support in react-native-svg; whatever was dropped is listed next to the output.