Add new SVG elements

README.md

@@ -1,2 +1,84 @@
 # react-primitives-svg
 Primitive React SVG Elements Across Targets
+
+## Prerequisites
+
+- Setup a `react-primitives` project
+
+## Getting Started
+
+Install with:
+
+```sh
+npm i --save react-primitives-svg
+```
+
+Make sure your build resolver (e.g. Webpack) resolves the platform extension (such as `.web.js` or `.ios.js`) before `.js` files.
+
+e.g.
+
+webpack.config.js
+
+```js
+module.exports = {
+  // ...
+  resolve: {
+    // ...
+    extensions: ['.web.jsx', '.web.js', '.jsx', '.js']
+    // ...
+  }
+  //...
+}
+```
+
+## Usage
+
+```jsx
+import { View, StyleSheet } from 'react-primitives';
+
+import {
+  Svg,
+  Circle,
+  ClipPath,
+  Ellipse,
+  G,
+  Image,
+  LinearGradient,
+  RadialGradient,
+  Line,
+  Path,
+  Pattern,
+  Polygon,
+  Polyline,
+  Rect,
+  Symbol,
+  Text,
+  TextPath,
+  TSpan,
+  Use,
+  Defs,
+  Stop,
+} from 'react-primitives-svg';
+
+const SvgExample = () => (
+  <View
+    style={{
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}
+  >
+    <Svg height="50%" width="50%" viewBox="0 0 100 100">
+      <Circle
+        cx="50"
+        cy="50"
+        r="45"
+        stroke="black"
+        strokeWidth="2"
+        fill="white"
+      />
+    </Svg>
+  </View>
+);
+
+export default SvgExample;
+```

src/core.android.js

@@ -2,37 +2,47 @@
 
 import Svg, {
   Circle,
+  ClipPath,
+  Defs,
   Ellipse,
   G,
-  LinearGradient,
-  RadialGradient,
+  Image,
   Line,
+  LinearGradient,
   Path,
+  Pattern,
   Polygon,
   Polyline,
+  RadialGradient,
   Rect,
+  Stop,
   Symbol,
   Text,
+  TextPath,
+  TSpan,
   Use,
-  Defs,
-  Stop,
 } from 'react-native-svg';
 
 module.exports = {
   Svg,
   Circle,
+  ClipPath,
+  Defs,
   Ellipse,
   G,
-  LinearGradient,
-  RadialGradient,
+  Image,
   Line,
+  LinearGradient,
   Path,
+  Pattern,
   Polygon,
   Polyline,
+  RadialGradient,
   Rect,
+  Stop,
   Symbol,
   Text,
+  TextPath,
+  TSpan,
   Use,
-  Defs,
-  Stop,
 };

src/core.ios.js

@@ -2,37 +2,47 @@
 
 import Svg, {
   Circle,
+  ClipPath,
+  Defs,
   Ellipse,
   G,
-  LinearGradient,
-  RadialGradient,
+  Image,
   Line,
+  LinearGradient,
   Path,
+  Pattern,
   Polygon,
   Polyline,
+  RadialGradient,
   Rect,
+  Stop,
   Symbol,
   Text,
+  TextPath,
+  TSpan,
   Use,
-  Defs,
-  Stop,
 } from 'react-native-svg';
 
 module.exports = {
   Svg,
   Circle,
+  ClipPath,
+  Defs,
   Ellipse,
   G,
-  LinearGradient,
-  RadialGradient,
+  Image,
   Line,
+  LinearGradient,
   Path,
+  Pattern,
   Polygon,
   Polyline,
+  RadialGradient,
   Rect,
+  Stop,
   Symbol,
   Text,
+  TextPath,
+  TSpan,
   Use,
-  Defs,
-  Stop,
 };

src/core.sketch.js

@@ -4,37 +4,47 @@ import { Svg } from 'react-sketchapp';
 
 const {
   Circle,
+  ClipPath,
+  Defs,
   Ellipse,
   G,
-  LinearGradient,
-  RadialGradient,
+  Image,
   Line,
+  LinearGradient,
   Path,
+  Pattern,
   Polygon,
   Polyline,
+  RadialGradient,
   Rect,
+  Stop,
   Symbol,
   Text,
+  TextPath,
+  TSpan,
   Use,
-  Defs,
-  Stop,
 } = Svg
 
 module.exports = {
   Svg,
   Circle,
+  ClipPath,
+  Defs,
   Ellipse,
   G,
-  LinearGradient,
-  RadialGradient,
+  Image,
   Line,
+  LinearGradient,
   Path,
+  Pattern,
   Polygon,
   Polyline,
+  RadialGradient,
   Rect,
+  Stop,
   Symbol,
   Text,
+  TextPath,
+  TSpan,
   Use,
-  Defs,
-  Stop,
 };

src/core.web.js

@@ -3,17 +3,22 @@ import 'react-dom';
 module.exports = {
   Svg: 'svg',
   Circle: 'circle',
+  ClipPath: 'clipPath',
   Ellipse: 'ellipse',
   G: 'g',
+  Image: 'image',
   LinearGradient: 'linearGradient',
   RadialGradient: 'radialGradient',
   Line: 'line',
   Path: 'path',
+  Pattern: 'pattern',
   Polygon: 'polygon',
   Polyline: 'polyline',
   Rect: 'rect',
   Symbol: 'symbol',
   Text: 'text',
+  TextPath: 'textPath',
+  TSpan: 'tspan',
   Use: 'use',
   Defs: 'defs',
   Stop: 'stop',