svgs

svgs

The svgs module is compatibility layer between react-native-svg and regular react (browser) based SVG elements. This allows you to write SVG in the react and react-native using exactly the same API. Bringing your applications a step closer to writing fully isomorphic application.

The library itself is written in ES6 and comes with the correct babel transforms as dependencies so it's easy to integrate in your existing tool chains and webpack builds.

Install

For regular react usage:

npm install --save svgs

For React-Native usage:

npm install --save svgs
npm install --save react-native-svg
react-native link react-native-svg

Word of caution, make sure that you install a react-native-svg version that works with your react-native version.

API

The API that we expose is exactly the same as the react-native-svg project so please visit: https://github.com/react-native-community/react-native-svg for the full API documentation. But here is a quick little overview of the available elements:

import Svg, {
  Circle,
  ClipPath,
  Defs,
  Ellipse,
  G,
  Image,
  Line,
  LinearGradient,
  Path,
  Polygon,
  Polyline,
  RadialGradient,
  Rect,
  Stop,
  Symbol,
  Text,
  TextPath,
  Use
} from 'svgs';

Any incompatibilities should be seen as a bug and be reported in the svgs/issue page on Github.

Example

Import all the SVG elements and make a Twitter logo.

import React, { Component } from 'react';
import Svg, { Path } from 'svgs';

class Twitter extends Component {
  render() {
    return (
      <Svg height='1208' width='1000' viewbox='0 0 1000 1208.3' preserveAspectRatio='meet'>
        <Path fill='#000' d='M0 1007.9q139.6 92.1 305.8 92.1 76.7 0 146.9-18.1 70.2-18.1 126.5-50 56.2-31.9 103.9-75.6 47.7-43.8 82.5-95.7 34.8-51.8 59.2-108.9 24.4-57.1 36.5-116.3 12-59.1 12-117.5 0-17.9-0.4-26.6 13.4-10 42.1-25.5 28.8-15.4 51-30.8 22.3-15.4 34-33.3-15.8 7.1-41.5 10-25.6 2.9-56.4 3.7-30.8 0.9-44.2 2.5 34.6-21.6 69.2-58.1 34.6-36.5 45-69.8-31.3 19.2-76.3 38.3-45 19.2-77 25.9-28-30.4-65.7-47.5-37.7-17.1-79.8-17.1-54.1 0-100.2 27.5-46 27.5-72.7 74.6-26.6 47.1-26.6 102.5 0 24.1 5 46.6-122.5-6.6-229.4-63.1-106.9-56.4-181.9-150.6-26.7 46.7-26.7 102.9 0 52.1 23.8 97.1 23.7 45 64.6 72.9-48.4-1.2-90-25.4l0 2.5q0 73.7 45.4 130.2 45.4 56.5 114.6 70.2-25 7.5-52.5 7.5-19.2 0-37.9-3.7 19.1 61.6 70.4 101.2 51.2 39.6 116.2 40.8-108.7 87.5-247.9 87.5-25.8 0-47.5-2.9z' />
      </Svg>
    );
  }
}

License

MIT

Changelog

3.0.0

• browser property changed to reactnative.
• Additional babel object spread plugin added.