add Image element (iOS)

Example/examples.js

@@ -13,6 +13,7 @@ import * as Use from './examples/Use';
 import * as Symbol from './examples/Symbol';
 import * as Gradients from './examples/Gradients';
 import * as Clipping from './examples/Clipping';
+import * as Image from './examples/Image';
 
 export {
     Svg,
@@ -29,5 +30,6 @@ export {
     Use,
     Symbol,
     Gradients,
-    Clipping
+    Clipping,
+    Image
 };

Example/examples/Image.js

@@ -0,0 +1,83 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Image,
+    Defs,
+    Circle,
+    ClipPath,
+    Text
+} from 'react-native-svg';
+
+class ImageExample extends Component{
+    static title = 'Image';
+
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Image
+                x="5%"
+                y="5%"
+                width="90%"
+                height="90%"
+                href={require('../image.jpg')}
+            />
+        </Svg>;
+    }
+}
+
+class ClipImage extends Component{
+    static title = 'Clip Image';
+
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Defs>
+                <ClipPath id="clip">
+                    <Circle cx="50%" cy="50%" r="40%"/>
+                </ClipPath>
+            </Defs>
+            <Image
+                x="5%"
+                y="5%"
+                width="90%"
+                height="90%"
+                href={require('../image.jpg')}
+                clipPath="url(#clip)"
+            />
+            <Text
+                x="50"
+                y="50"
+                textAnchor="middle"
+                fontWeight="bold"
+                fontSize="16"
+                fill="red"
+            >HOGWARTS</Text>
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <Image
+        x="5%"
+        y="5%"
+        width="90%"
+        height="90%"
+        href={require('../image.jpg')}
+    />
+</Svg>;
+
+const samples = [ImageExample, ClipImage];
+
+export {
+    icon,
+    samples
+};

Example/main.js

@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
     }
 });
 
-const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients', 'Clipping'];
+const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients', 'Clipping', 'Image'];
 
 class ArtSvgExample extends Component {
     constructor() {