Why did my gradient disappear?

It should not. Linear and radial gradients are carried through to every target, as Defs and LinearGradient for React Native, a shader for Flutter, a Brush for Compose and a LinearGradient for SwiftUI. Anything that still cannot be translated is listed in the warnings rather than silently dropped.

Can I convert several icons at once?

Yes. Drop or open several .svg files at once and the converted components download as a zip, one file per icon, with name collisions resolved.

SVG to React Native

react-native-svg mirrors the SVG element names but not its tooling, so pasting raw icon markup into a React Native app rarely works unchanged. This optimizes the source with SVGO, resolves the parts react-native-svg does not support, flattens transforms into the path data, and emits a component you can drop into a project.

svg

react native

options

target

component name

precision

tintable (use currentColor)

preview

Paste or drop an SVG to preview it.

how to use it

01Paste SVG markup or drop an .svg file.
02Set the component name and whether colors become currentColor.
03Copy the generated component.

questions

Why did my gradient disappear?: It should not. Linear and radial gradients are carried through to every target, as Defs and LinearGradient for React Native, a shader for Flutter, a Brush for Compose and a LinearGradient for SwiftUI. Anything that still cannot be translated is listed in the warnings rather than silently dropped.
Can I convert several icons at once?: Yes. Drop or open several .svg files at once and the converted components download as a zip, one file per icon, with name collisions resolved.

how to use it

questions

related