1

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?

Senor Coder
  • 63
  • 1
  • 5
  • I am curious, may I do a short interview? Have you used the search box at the top of this page? How many StackOverflow posts did you read? How can we make StackOverflow better answer your question? – Danny '365CSI' Engelman Mar 28 '21 at 12:35

3 Answers3

0

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

Hassan Kandil
  • 1,612
  • 1
  • 13
  • 26
0

Recommond Parcel

const logo = new URL('logo.svg', import.meta.url);
export function Logo() {return <img src={logo} alt="logo" />}
Soecka
  • 1
  • Welcome to SO! Please don't post code-only answers but add a little textual explanation about how and why your approach works and what makes it different from the other answers given. You may also have a look at our ["How to write a good answer"](https://stackoverflow.com/help/how-to-answer) entry. – ahuemmer Jul 26 '22 at 13:12
-1

I just found out an easy way to solve this problem that works for me.

I'm using Expo and I have react-native-svg installed. Note that this is different from importing SvgUri from react-native-svg-uri. That is a different library.

import { SvgUri } from "react-native-svg";

<SvgUri
  uri="https://example.com/uploads/apple.svg"
  width="40%"
  height="40%"
/>
Presh Onyee
  • 29
  • 4