Fixing <Close /> component`s requring of svg and adding to test file

ui/src/components/close/index.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const Styled = require('styled-components');
-const closeIcon = require('../../shared/assets/close.png');
+
 const fns = require('../../shared/functions');
 
 const {
@@ -30,7 +30,7 @@ const Close = ({
     >
       <img
         alt="Close"
-        src={closeIcon}
+        src="./close.svg"
       />
     </StyledButton>
   );

ui/src/shared/assets/close.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>icon: close</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ui-components-revised" transform="translate(-3367.000000, -870.000000)" fill="#646464">
+            <g id="notifications" transform="translate(2457.000000, 72.000000)">
+                <g id="notification:-error" transform="translate(0.000000, 780.000000)">
+                    <path d="M916.899495,22.8994949 L916.899495,16.8994949 L914.899495,16.8994949 L914.899495,22.8994949 L908.899495,22.8994949 L908.899495,24.8994949 L914.899495,24.8994949 L914.899495,30.8994949 L916.899495,30.8994949 L916.899495,24.8994949 L922.899495,24.8994949 L922.899495,22.8994949 L916.899495,22.8994949 Z" id="icon:-close" transform="translate(915.899495, 23.899495) rotate(45.000000) translate(-915.899495, -23.899495) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/stories/index.js

@@ -56,8 +56,6 @@ const {
   RadioGroup
 } = require('../src/');
 
-
-
 const seed = require('./seed');
 const {
 	selectData
@@ -368,7 +366,14 @@ storiesOf('Tabs', module)
 
 storiesOf('Close', module)
   .add('Default', () => (
+    <Base
+      style={{
+        position: 'relative',
+        width: 60
+      }}
+    >
       <Close onClick={function noop() {}} />
+    </Base>
   ));
 
 storiesOf('Toggle', module)

ui/test/index.js

@@ -24,6 +24,12 @@ test('renders <Button> without exploding', (t) => {
   t.deepEqual(wrapper.length, 1);
 });
 
+test('renders <Close> without exploding', (t) => {
+  const Close = require('../src/components/close');
+  const wrapper = shallow(<Close />);
+  t.deepEqual(wrapper.length, 1);
+});
+
 test('renders <Checkbox> without exploding', (t) => {
   const Checkbox = require('../src/components/checkbox');
   const wrapper = shallow(<Checkbox />);