nahira-react-native-svg

SVG support for react native using webview

 

Install

npm i nahira-react-native-svg
npm i react-native-webview

 

Usage

App.js

import React from 'react';
import {View, StyleSheet} from 'react-native';
import Image from 'nahira-react-native-svg';
import milkBottleSvg from './assets/svg/milk-bottle';

...

<View style={styles.mainContainer}>
  <Text>static SVG file:</Text>
  <Image style={styles.image} source={{svg: milkBottleSvg}} />

  <Text>remote SVG file:</Text>
  <Image
    style={styles.image}
    source={{uri: 'https://www.svgrepo.com/show/288535/remote.svg'}}
  />

  <Text>static another type of image file:</Text>
  <Image
    style={styles.image}
    source={require('./assets/image/github.png')}
  />

  <Text>remote another type of image file:</Text>
  <Image
    style={styles.image}
    source={{uri: 'https://reactjs.org/logo-og.png'}}
  />
</View>


...

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: '#FFF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 100,
    height: 100,
    marginVertical: 15,
  },
});

...

milkBottleSvg.js

(just paste your SVG code in the js file without any changes)

export default `<svg id="Capa_1" enable-background="new 0 0 511.998 511.998" height="512" viewBox="0 0 511.998 511.998" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m485.5 62.693 11.517-11.517c9.995-9.995 9.995-26.2 0-36.195-9.995-9.995-26.2-9.995-36.195 0l-11.517 11.517c-17.375 17.375-44.203 21.032-65.595 8.941-21.391-12.091-48.22-8.434-65.595 8.941l-7.816 7.816 149.503 149.503 7.816-7.816c17.375-17.375 21.032-44.203 8.941-65.595-12.091-21.391-8.434-48.22 8.941-65.595z" fill="#fff2b4"/></g><g><path d="m393.483 90.018c12.526-12.526 32.835-12.526 45.362 0l37.066 37.066c-11.291-21.187-7.462-47.339 9.589-64.391l11.517-11.517c9.995-9.995 9.995-26.2 0-36.195s-26.2-9.995-36.195 0l-11.517 11.517c-17.375 17.375-44.203 21.032-65.595 8.941-21.391-12.091-48.22-8.434-65.595 8.941l-7.816 7.816 83.184 83.184c-12.527-12.527-12.527-32.836 0-45.362z" fill="#ffdf8e"/></g><g><path d="m404.686 248.945-141.634-141.634c-17.383-17.383-17.383-45.566 0-62.948 17.383-17.383 45.566-17.383 62.948 0l141.634 141.634c17.383 17.383 17.383 45.566 0 62.948-17.382 17.383-45.565 17.383-62.948 0z" fill="#b0d8fd"/></g><g><path d="m319.621 100.931c17.383-17.383 45.566-17.383 62.949 0l-56.569-56.569c-17.383-17.383-45.566-17.383-62.948 0-17.383 17.383-17.383 45.566 0 62.949l56.569 56.569c-17.384-17.383-17.384-45.566-.001-62.949z" fill="#9ccefd"/></g><g><path d="m427.623 321.553c6.51-6.51 9.923-14.191 11.513-21.755 3.535-16.823-2.128-34.27-14.283-46.425l-166.229-166.227c-12.155-12.155-29.603-17.818-46.425-14.283-7.564 1.589-15.245 5.003-21.755 11.513-21.699 21.699-34.558 56.257-74.34 96.039s-74.34 52.641-96.04 74.34c-6.51 6.51-9.923 14.191-11.513 21.755-3.535 16.823 2.128 34.27 14.283 46.425l166.228 166.228c12.155 12.155 29.603 17.818 46.425 14.283 7.564-1.589 15.245-5.003 21.755-11.513 21.699-21.699 34.558-56.257 74.34-96.04 39.783-39.781 74.341-52.64 96.041-74.34z" fill="#f7f0eb"/></g><g><path d="m65.121 333.078c1.589-7.564 5.003-15.245 11.513-21.755 21.699-21.699 56.257-34.558 96.039-74.34s52.641-74.34 74.34-96.039c6.51-6.51 14.191-9.923 21.755-11.513 16.823-3.535 34.27 2.128 46.425 14.283l-56.569-56.569c-12.155-12.155-29.603-17.818-46.425-14.283-7.564 1.589-15.245 5.003-21.755 11.513-21.699 21.699-34.558 56.257-74.34 96.039s-74.34 52.641-96.039 74.34c-6.51 6.51-9.923 14.191-11.513 21.755-3.535 16.823 2.128 34.27 14.283 46.425l56.569 56.569c-12.155-12.155-17.818-29.603-14.283-46.425z" fill="#efe2dd"/></g><g><g><g><ellipse cx="159.937" cy="233.882" fill="#fda0c1" rx="24.555" ry="30.834" transform="matrix(.707 -.707 .707 .707 -118.535 181.595)"/></g><g><ellipse cx="278.116" cy="352.061" fill="#fda0c1" rx="24.555" ry="30.834" transform="matrix(.707 -.707 .707 .707 -167.487 299.774)"/></g></g><g><path d="m189.571 237.161c-1.919 0-3.839-.732-5.303-2.197-2.929-2.929-2.929-7.678 0-10.606l8.485-8.485c2.929-2.929 7.678-2.929 10.606 0 2.929 2.929 2.929 7.678 0 10.606l-8.485 8.485c-1.464 1.464-3.384 2.197-5.303 2.197z"/></g><g><path d="m246.653 295.775c-8.05 0-15.798-3.184-21.522-8.909-6.219-6.219-9.44-14.827-8.836-23.616.284-4.133 3.871-7.258 7.996-6.969 4.132.284 7.252 3.864 6.969 7.996-.307 4.463 1.326 8.83 4.479 11.982 3.152 3.153 7.518 4.788 11.982 4.479 4.125-.284 7.712 2.836 7.996 6.969.284 4.132-2.836 7.712-6.969 7.996-.7.048-1.398.072-2.095.072z"/></g><g><path d="m294.044 341.161c-1.919 0-3.839-.732-5.303-2.197-2.929-2.929-2.929-7.678 0-10.606 2.498-2.498 2.498-6.562 0-9.06-1.21-1.21-2.819-1.876-4.53-1.876s-3.32.667-4.529 1.876c-2.929 2.929-7.677 2.929-10.607 0-2.929-2.929-2.929-7.678 0-10.607 4.043-4.043 9.419-6.27 15.137-6.27 5.718 0 11.093 2.227 15.136 6.27s6.27 9.418 6.27 15.136-2.227 11.093-6.27 15.136c-1.465 1.466-3.384 2.198-5.304 2.198z"/></g></g><path d="m502.32 56.48c12.903-12.904 12.903-33.899 0-46.802s-33.898-12.903-46.802 0l-11.517 11.518c-14.937 14.934-38.211 18.107-56.601 7.714-20.761-11.735-46.037-10.581-65.527 2.678-8.137-5.05-17.531-7.762-27.347-7.762-13.893 0-26.954 5.41-36.777 15.234-7.929 7.929-13.019 18.208-14.651 29.161-10.262-3.973-21.481-5-32.442-2.698-10.052 2.113-18.637 6.671-25.515 13.549-9.755 9.754-17.545 21.546-26.565 35.2-11.919 18.043-25.43 38.494-47.775 60.839-8.279 8.278-16.828 15.88-26.137 23.238-3.25 2.569-3.802 7.285-1.233 10.535 2.57 3.25 7.287 3.801 10.535 1.233 9.771-7.724 18.747-15.705 27.441-24.399 23.418-23.418 37.982-45.464 49.685-63.178 8.571-12.975 15.974-24.18 24.656-32.862 4.785-4.785 10.838-7.973 17.993-9.476 14.143-2.971 28.94 1.607 39.58 12.247l166.228 166.228c10.64 10.64 15.218 25.437 12.247 39.58-1.503 7.155-4.691 13.209-9.476 17.994-8.682 8.682-19.887 16.084-32.862 24.656-17.714 11.702-39.759 26.266-63.178 49.685s-37.982 45.464-49.685 63.178c-8.571 12.975-15.974 24.18-24.656 32.862-4.785 4.784-10.838 7.973-17.993 9.476-14.143 2.972-28.94-1.607-39.58-12.247l-166.227-166.23c-10.64-10.64-15.218-25.437-12.247-39.58 1.503-7.155 4.692-13.209 9.476-17.994 8.682-8.682 19.888-16.085 32.863-24.657 3.279-2.166 6.663-4.402 10.143-6.748 3.435-2.315 4.342-6.977 2.027-10.411-2.315-3.435-6.977-4.342-10.411-2.027-3.441 2.319-6.786 4.529-10.027 6.67-13.654 9.021-25.447 16.811-35.202 26.566-6.878 6.878-11.437 15.462-13.549 25.516-4.017 19.12 2.084 39.035 16.32 53.271l166.228 166.228c11.353 11.353 26.316 17.532 41.61 17.532 3.883 0 7.789-.398 11.661-1.212 10.053-2.113 18.637-6.671 25.515-13.549 9.755-9.754 17.545-21.546 26.565-35.2 11.919-18.043 25.43-38.494 47.775-60.839s42.796-35.856 60.839-47.775c13.654-9.02 25.446-16.81 35.2-26.565 6.878-6.878 11.437-15.463 13.549-25.516 2.301-10.954 1.276-22.168-2.692-32.426 10.952-1.631 21.222-6.732 29.155-14.666 9.824-9.824 15.234-22.885 15.234-36.777 0-9.816-2.712-19.21-7.762-27.347 13.259-19.488 14.411-44.768 2.678-65.527-10.394-18.39-7.222-41.665 7.715-56.601zm-32.291 75.499c8.182 14.476 8.108 31.848.236 46.043l-20.28-20.281c-2.928-2.929-7.677-2.929-10.606 0s-2.929 7.678 0 10.606l22.953 22.953c6.991 6.99 10.84 16.285 10.84 26.171s-3.85 19.18-10.84 26.171c-7.043 7.043-16.688 10.943-26.611 10.827-1.689-2.234-3.542-4.375-5.565-6.399l-166.229-166.228c-2.023-2.023-4.164-3.875-6.397-5.564-.113-9.932 3.786-19.573 10.826-26.612 6.991-6.99 16.285-10.84 26.171-10.84s19.181 3.85 26.171 10.84l97.472 97.472c1.464 1.464 3.384 2.197 5.303 2.197s3.839-.732 5.303-2.197c2.929-2.929 2.929-7.678 0-10.606l-94.8-94.8c14.194-7.872 31.564-7.947 46.043.237 24.232 13.696 54.905 9.516 74.588-10.167l11.517-11.518c7.055-7.055 18.535-7.054 25.589 0s7.055 18.534 0 25.589l-11.517 11.517c-19.683 19.683-23.863 50.355-10.167 74.589z"/></g></svg>`;