react-native-svgson

• Render SVG from a JSON definition generated by https://github.com/elrumordelaluz/svgson
• SVG rendering through Expo.Svg or react-native-svg
• Dynamic styling of SVG elements by element type or ID

Based on react-native-svgx by Jose Antonio Sanchez.

Installation

$ npm install @delightfulstudio/react-native-svgson --save

Example

import * as Svg from 'react-native-svg';
// or import { Svg } from 'expo';
import SvgJson from 'react-native-svgson';

import checkmark from '../icons/checkmark.json';

function renderCheckmark() {
  const styles = {
    svg: {
        height: 38, // override default dimensions
        width: 38,
    },
    path: {
        fill: '#000000' // all <path> elements
    },
    '#circle-path': {
      fill: '#222222' // path with id="circle-path"
    }
  };

  return <SvgJson svgLib={Svg} data={checkmark} style={styles} />;
}