Add Symbol element refactor viewbox

Add Symbol element refactor viewbox

Example/examples.js

@@ -10,6 +10,7 @@ import * as Text from './examples/Text';
 import * as G from './examples/G';
 import * as Stroking from './examples/Stroking';
 import * as Use from './examples/Use';
+import * as Symbol from './examples/Symbol';
 import * as Gradients from './examples/Gradients';
 
 export {
@@ -25,5 +26,6 @@ export {
     Stroking,
     G,
     Use,
+    Symbol,
     Gradients
 };

Example/examples/Svg.js

@@ -72,6 +72,7 @@ class SvgViewbox extends Component{
             height="100"
             width="100"
             viewbox="40 20 100 40"
+            preserveAspectRatio="none"
         >
             <Rect x="0" y="0" width="100" height="100" fill="black" />
             <Circle cx="50" cy="50" r="30" fill="yellow" />

Example/examples/Symbol.js

@@ -0,0 +1,79 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Symbol,
+    Circle,
+    Use
+} from 'react-native-art-svg';
+
+class SymbolExample extends Component{
+    static title = 'Symbol example';
+    render() {
+        return <Svg
+            height="150"
+            width="110"
+        >
+            <Symbol id="symbol" viewbox="0 0 150 110">
+                <Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
+                <Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
+            </Symbol>
+
+            <Use
+                href="#symbol"
+                x="0"
+                y="0"
+                width="100"
+                height="50"
+            />
+            <Use
+                href="#symbol"
+                x="0"
+                y="50"
+                width="75"
+                height="38"
+            />
+            <Use
+                href="#symbol"
+                x="0"
+                y="100"
+                width="50"
+                height="25"
+            />
+
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <Symbol id="symbol" viewbox="0 0 150 110">
+        <Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
+        <Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
+    </Symbol>
+
+    <Use
+        href="#symbol"
+        x="0"
+        y="0"
+        width="20"
+        height="10"
+    />
+    <Use
+        href="#symbol"
+        x="0"
+        y="12"
+        width="20"
+        height="8"
+    />
+</Svg>;
+
+const samples = [SymbolExample];
+
+export {
+    icon,
+    samples
+}

Example/main.js

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