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.

There are 2 ways in using this package, you could use svgs instead of
react-native-svg which is recommended. But you could also instruct your
WebPack builder to use svgs as an alias for react-native-svg.

Table of Contents

- Install
- WebPack
- API
- Example
- Accessibility
- License

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. See the react-native-svg
project for a list of supported React versions.

WebPack

To use this package as alias for react-native-svg you need to update your
WebPack configuration to include the following snippet:

`
resolve: {
alias: {
...
'react-native-svg': 'svgs',
}
}
`

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:

`js
import Svg, {
Circle,
ClipPath,
Defs,
Ellipse,
G,
Image,
Line,
LinearGradient,
Mask,
Path,
Pattern,
Polygon,
Polyline,
RadialGradient,
Rect,
Stop,
Svg,
Symbol,
TSpan,
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.

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

class Twitter extends Component {
render() {
return (



);
}
}
`

#### Accessibility

If you want Section 508 Accessibility add the title prop to the component like this:
`js

`
When this renders on native, you'll get your SVG wrapped in a View with an accessibilityLabel.
On web, the SVG element will get two aria labels and a
...

``

License

MIT