Navigate back to the homepage

React native SVG

Infinitbility
React Native
May 15th, 2021 · 1 min read
React native SVG

Hello Friends,

Welcome To Infinitbility!

This article helps you to use SVG icons in your react native, here you will see two different ways to use SVG icons in react native.

For render SVG we are going to use react-native-svg package.

Let’s start today topic React native SVG Or how to use svg in react native

Table of content

  1. Installation
  2. SvgUri
  3. SvgXml

Installation

Follow below steps to install react native svg in react native.

  • Install react native svg package using npm
1npm install react-native-svg
  • Install react native svg package using yarn
1yarn add react-native-svg
  • pod install for ios development only
1cd ios && pod install
  • Link lib with your React Native Application
1npx react-native link react-native-svg

SvgUri

React Native SVG provide SvgUri component to render SVG only from your servers and online available, understand with example.

1import * as React from 'react';
2import { SvgUri } from 'react-native-svg';
3
4export default () => (
5 <SvgUri
6 width="100%"
7 height="100%"
8 uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
9 />
10);

SvgXml

React Native SVG provide SvgXml component to render SVG code, we have to put svg icon code in component and SvgXml render icon.

Here, SvgXml example

1import * as React from 'react';
2import { SvgXml } from 'react-native-svg';
3
4const xml = `
5 <svg width="32" height="32" viewBox="0 0 32 32">
6 <path
7 fill-rule="evenodd"
8 clip-rule="evenodd"
9 fill="url(#gradient)"
10 d="M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 18 5H20C20.5523 5 21 5.44772 21 6V25C21 25.5523 20.5523 26 20 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 11 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 11.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 5 18.4477 5 19V25C5 25.5523 5.44772 26 6 26H8C8.55228 26 9 25.5523 9 25V19C9 18.4477 8.55228 18 8 18H6ZM24 14C23.4477 14 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 14.4477 26.5523 14 26 14H24Z"
11 />
12 <defs>
13 <linearGradient
14 id="gradient"
15 x1="0"
16 y1="0"
17 x2="8.46631"
18 y2="37.3364"
19 gradient-units="userSpaceOnUse">
20 <stop offset="0" stop-color="#FEA267" />
21 <stop offset="1" stop-color="#E75A4C" />
22 </linearGradient>
23 </defs>
24 </svg>
25`;
26
27export default () => <SvgXml xml={xml} width="100%" height="100%" />;

Subscribe Our Newsletter for the weekly update.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Tutorials

React Native

Categories

More articles from Infinitbility

React native autocomplete

React native autocomplete

how to add autocomplete in react native

May 14th, 2021 · 1 min read
SVN tutorial for ubuntu

SVN tutorial for ubuntu

how to setup svn and use in ubuntu

May 13th, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]