Merge pull request #10 from andela/ft-icon-component-167621408

#167621408 Create reusable icon component

src/components/IconComponent/IconComponent.spec.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import IconComponent from './index.jsx';
+
+describe('Render component', () => {
+  it('renders Icon component', () => {
+    shallow(
+      <IconComponent
+        src={'./../src/assets/images/twitter-normal.svg'}
+        alt={'image asset'}
+        className={'icon-small'}
+      />
+    );
+  });
+});

src/components/IconComponent/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import './index.scss';
+
+
+/** 
+ *  Sample Usage
+ *  <IconComponent
+ *      src={'./../src/assets/images/twitter-dark.svg'}
+ *      alt={'image asset'}
+ *      className={'icon-large'}
+ *  />
+*/
+const IconComponent = ({ className, src, alt }) => {
+  return <img className={className} src={src} alt={alt} />;
+};
+
+
+
+IconComponent.propTypes = {
+  className: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired
+};
+
+export default IconComponent;

src/components/IconComponent/index.scss

@@ -0,0 +1,9 @@
+.icon-large {
+  height: 100px;
+  width: 100px;
+}
+
+.icon-small {
+  height: 20px;
+  width: 20px;
+}