What are the steps to incorporate SVG into a React Native project?

I'm in the process of integrating bootstrap icons into my react native project, but I've been having trouble finding clear instructions on how to render an SVG in react-native. Can anyone provide some guidance on this?

javascriptreact-nativesvgbootstrap-4bootstrap-icons

Answer №1

For incorporating SVGs in react native, the recommended package to use is react-native-svg

To Install:

yarn add react-native-svg

Here is an example on how to use it:

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';

/* If 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>
    );
  }
}

If you need to import an svg file into your app, utilize: react-native-svg-transformer

Example:

import Logo from "./logo.svg";

<Logo width={120} height={40} />

If you prefer using an icon library, consider using : react-native-vector-icons

You can also explore the directory here: React Native Vector Icons directory

Answer №2

Suggestion: Parcel

const logo = new URL('logo.svg', import.meta.url);
export function Logo() {return <img src={logo} alt="logo" />}

Answer №3

Discovering a simple solution to this problem that has proven effective for me.

Currently utilizing Expo with react-native-svg already incorporated. It's worth noting that importing SvgUri from react-native-svg-uri is a different library altogether.

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

<SvgUri
  uri="https://example.com/uploads/apple.svg"
  width="40%"
  height="40%"
/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigation bar options across various web pages

In my Next JS project, I encountered an issue with the Navbar component. By default, the Navbar elements change color from white to black when scrolling below 950px. However, I needed to make an exception for another specific page ("/lodge/page.tsx"). On t ...

javascriptreactjsnext.jstailwind-css

How can I pass an array object from an HTML form that adheres to a Mongoose schema

I have this HTML form that I'm using to create a new document in my mongo database. The document represents notes given to a teacher based on various criteria. I am storing the notes in an array within the note property, each object containing the aut ...

javascripthtmlnode.jsexpressmongoose

Is there a method to accurately detect the rendering of individual elements within a React Component, rather than the entire component itself?

While it's known that Components rendering can be detected through React's Developer Tool, I came across other methods in this source. However, what I'm specifically interested in is detecting the rendering of individual elements within a Co ...

javascriptreactjsgoogle-chrome-extensiongoogle-chrome-devtoolsreact-devtools

Having trouble grasping the intricacies of using EventEmitter with webpack and es6 modules

As I delve into learning webpack and ES6 simultaneously, I've come to the realization that I need an event bus. Even though I'm new to EventEmitters and constructors, I have gone through the documentation and numerous examples. However, I can&apo ...

javascriptnode.jsecmascript-6webpackeventemitter

Creating a unique custom authentication controller in Strapi.OR

While using Strapi for my API and Back office, I've encountered a problem. Everything works fine except for one issue: I am struggling to override the controller used for the forgot password feature. Despite attempting to follow the documentation, par ...

javascriptnode.jsnode-modulesstrapi

Loading screen displayed while retrieving data using Redux

I've been trying to incorporate loading screens into my components while fetching data from my API. Despite my research and efforts, the loading screen never seems to disappear and I'm not sure why. I've been trying to troubleshoot this issu ...

javascriptreactjsredux

Retrieving JSON Data from an API with JavaScript/jQuery

Having some trouble with JSON parsing using jQuery and JavaScript. I'm trying to fetch weather information from the open weather simplest API, but for some reason it's not working. When I hardcode the JSON data into a file or my script, everythin ...

javascriptjqueryjson

How can I restrict Material UI TextFields with input type = file to only allow pdf files?

Is there a way to restrict users from uploading anything other than PDF files using input type=file? I've researched about using the accept attribute but seems like it's not compatible with material UI text fields. Is there an alternative soluti ...

javascriptreactjsmaterial-uiinput-type-file

Error: webpack-cli encountered an unrecognized argument along with a syntax error

Hello, I am currently delving into the realm of prestashop theme development. After setting up my local environment successfully, everything seems to be working fine. My next step is to create a new theme based on the classic default theme. Upon navigat ...

javascriptnode.jsnpmwebpackwebpack-cli

Is it possible to conduct an auction in JavaScript without using the settimeout or setinterval functions?

I'm currently working on creating an auction site and I need help improving its speed and performance. I've been using setInterval and setTimeout functions for the countdown, but it's quite slow as a request is sent to the server every secon ...

phpjavascriptnode.jssocket.io

What is the best way to perform this task in Angular2?

I am currently working with three arrays: tables = [{number:1},{number:2},{number:3},{number:4}]; foods = [ {id:1, name:'Ice Cream'}, {id:2, name:'Pizza'}, {id:1, name:'Hot Dog'}, {id:2, name:'Salad'} ]; o ...

javascriptangular

Generating a JSON array from a C# collection can be achieved by utilizing the System.Web.Script.Serialization

Can someone help me with this code snippet? var httpWebRequestAuthentication = (HttpWebRequest)WebRequest.Create("http://api"); httpWebRequestAuthentication.ContentType = "application/json"; httpWebRequestAuthentication.Accept ...

javascriptc#json

Display a "busy" indicator using Ajax, specifically for requests that take longer to process

Is there a way to delay the appearance of the busy indicator until a certain amount of time has passed? The code I'm using for the busy indicator is quite simple: jQuery.ajaxSetup( { beforeSend:function () { jQuery( "#busy-indicator" ...

javascriptjquery

Because of the CSS tree structure, it is not possible to add or remove classes. This restriction applies to all actions done in jQuery, including click

I want to create a hover effect where the CSS changes when hovering over an item, then reverts back to normal when no longer hovered. Additionally, I would like the CSS to change when the item is selected, and return to normal when another item in the same ...

javascriptjquerycss

Is there an issue with my AJAX implementation?

Entering the realm of AJAX for the first time and looking to load unique URLs from a MySQL database into an iframe upon click event. Open to suggestions on better methodologies. Currently, just trying to grasp the concept of AJAX by retrieving URLs using ...

javascriptajaxjsonjquery

The Mobile Side Menu Is Not Scrollable

I've encountered an issue with the side menu on my website. While it works perfectly fine on PC, it refuses to scroll on mobile devices. I've tested it on both my iPhone 5 and iPad, but no luck. Additionally, the toggle button isn't function ...

javascriptjqueryhtmlcssnavbar

Using Javascript or Typescript constants along with WebPack being invoked twice

I am encountering an issue with my constants file: collections.ts import {Mongo} from 'meteor/mongo'; import {Chat, Message} from 'api/models'; export const Chats = new Mongo.Collection<Chat>('chats'); export const Me ...

javascriptnode.jstypescript

Encountering issues with styled component's flex not functioning as expected in React

I am currently working with styled-components, and I have been using "flex" for responsive design. However, I am facing some challenges in implementing it. The CSS defined within styled-components does not seem to be applying properly. The styles are not ...

javascriptcssreactjsstyled-components

Looking for an image that spans the entire height of the container

I need help with positioning an img inside a div container that has a background color. I want the image to overlay on top of the div, extending beyond its height without causing any scroll bars. Here is a fiddle related to this issue: http://jsfiddle.net ...

javascripthtmlcss

Converting a timestamp from PHP in JSON format to date and time using JavaScript

Within the JSON file, there is a timestamp associated with each user login. An example of this timestamp is: timestamp: "1541404800" What steps should be taken to convert this timestamp into date and time format? ...

javascriptjson