I am trying to use bootstrap icons in react native and I can’t find any useful methods on how to render an SVG in react-native. Does anyone know how to?
Advertisement
Answer
To Add SVGs in react native you can use react-native-svg
Install:
yarn add react-native-svg
Example:
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'; /* Use this if you are using Expo import * as Svg from 'react-native-svg'; const { Circle, Rect } = Svg; */ import React from 'react'; import { View, StyleSheet } from 'react-native'; export default class SvgExample extends React.Component { render() { return ( <View style={[ StyleSheet.absoluteFill, { alignItems: 'center', justifyContent: 'center' }, ]} > <Svg height="50%" width="50%" viewBox="0 0 100 100"> <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" /> <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" /> </Svg> </View> ); } }
Or you want to import an svg to your app use: react-native-svg-transformer
Example:
import Logo from "./logo.svg"; <Logo width={120} height={40} />
But if you want an icon library you can use : react-native-vector-icons
Also here is the directory: React Native Vector Icons directory