Add Icon component for icons

Author: andrewn

client/common/Icon.jsx

@@ -0,0 +1,34 @@
+/* eslint-disable global-require */
+import InlineSVG from 'react-inlinesvg';
+import PropTypes from 'prop-types';
+import React from 'react';
+import lodash from 'lodash';
+
+const icons = {
+  github: require('../images/github.svg'),
+  google: require('../images/google.svg'),
+};
+
+/*
+  names will be an mirror-object of icon names:
+    {
+      github: 'github',
+      ...
+    }
+*/
+const names = lodash.mapValues(icons, (value, key) => key);
+
+
+function Icon({ name, ...props }) {
+  return (
+    <InlineSVG src={icons[name]} {...props} />
+  );
+}
+
+Icon.names = names;
+
+Icon.propTypes = {
+  name: PropTypes.oneOf(Object.keys(names)).isRequired
+};
+
+export default Icon;

client/common/Icon.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { select } from '@storybook/addon-knobs';
+
+import Icon from './Icon';
+
+export default {
+  title: 'Common/Icon',
+  component: Icon
+};
+
+export const AllIcons = () => {
+  const firstIconName = Object.keys(Icon.names)[0];
+
+  return (
+    <Icon name={select('name', Icon.names, firstIconName)} />
+  );
+};