How To Import Svg Image In React Native. React-native-svg-transformer React Native SVG transformer allows you import SVG files in your React Native project the same way that you would in a Web application when a using library like SVGR to transform your imported SVG images into React components. Import as React from react.
Lets look at how you can use the react-native-svg library to render SVGs in your app. Import React from react import View from react-native import Svg Circle Ellipse G Text TSpan TextPath Path Polygon Polyline Line Rect Use Image Symbol Defs LinearGradient RadialGradient Stop ClipPath Pattern Mask from react-native-svg const AlertIcon. To import we go with the following.
You can now import and use your new SVG component wherever you want like a normal React component.
Jest mock configuration for SVG imports A Great SVG Library. Props Circle cx 50 cy 50 r 45 stroke blue strokeWidth 25 fill green Rect x 15 y 15 width 70 height 70 stroke red strokeWidth 2 fill yellow. Import Svg Rect from react-native-svg. Add a file metroconfigjs at the root in your project if not exists with the code below.
