feat: Icon component (#1499)

* New icons and old strucure of OHIF ui v1

* Export icon

* Removing wrong import and fixing some exports

* Fixing svg loader and svg images to fullCurrent

* Small fixes on docz

* Remove repeated icon

* Update other components to use Icon

* Update platform/ui/src/components/Icon/icon.mdx

Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

* Fixing callouts

* Move icons to assets and fixing layout on iconButtons

* Fix path of icons

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>
Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

platform/ui/src/components/Icon/Icon.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import getIcon from './getIcon';
+
+const Icon = ({ name, ...otherProps }) => {
+  return <React.Fragment>{getIcon(name, otherProps)}</React.Fragment>;
+};
+
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default Icon;

platform/ui/src/components/Icon/getIcon.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+// Icons
+import active from './../../assets/icons/active.svg';
+import cancel from './../../assets/icons/cancel.svg';
+import chevronDown from './../../assets/icons/chevron-down.svg';
+import chevronRight from './../../assets/icons/chevron-right.svg';
+import infoLink from './../../assets/icons/info-link.svg';
+import launchArrow from './../../assets/icons/launch-arrow.svg';
+import launchInfo from './../../assets/icons/launch-info.svg';
+import settings from './../../assets/icons/settings.svg';
+import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
+import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
+import sorting from './../../assets/icons/sorting.svg';
+
+const ICONS = {
+  active: active,
+  cancel: cancel,
+  'chevron-down': chevronDown,
+  'chevron-right': chevronRight,
+  'info-link': infoLink,
+  'launch-arrow': launchArrow,
+  'launch-info': launchInfo,
+  settings: settings,
+  'sorting-active-down': sortingActiveDown,
+  'sorting-active-up': sortingActiveUp,
+  sorting: sorting,
+};
+
+/**
+ * Return the matching SVG Icon as a React Component.
+ * Results in an inlined SVG Element. If there's no match,
+ * return `null`
+ */
+export default function getIcon(key, props) {
+  if (!key || !ICONS[key]) {
+    return React.createElement('div', null, 'Missing Icon');
+  }
+
+  return React.createElement(ICONS[key], props);
+}
+
+export { ICONS };

platform/ui/src/components/Icon/icon.mdx

@@ -0,0 +1,43 @@
+---
+name: Icon
+menu: Components
+route: components/icon
+---
+
+import { Playground, Props } from 'docz';
+import Icon from './Icon';
+import { ICONS } from './getIcon';
+
+# Icon
+
+## Basic usage
+
+<Playground>
+  <Icon name="active" className="text-custom-aquaBright m-4" />
+</Playground>
+
+## All Icons
+
+<div className="flex flex-wrap items-center bg-black py-8">
+  {Object.keys(ICONS)
+    .sort()
+    .map((name, i) => {
+      return (
+        <React.Fragment key={i}>
+          <div className="flex flex-col items-center w-48 py-4">
+            <div className="flex items-center justify-center rounded border border-custom-aquaBright p-4 m-2 w-20 h-20">
+              <Icon name={name} className="text-custom-aquaBright" />
+            </div>
+            <div className="break-normal text-white">{name}</div>
+          </div>
+        </React.Fragment>
+      );
+    })}
+</div>
+
+## Properties
+
+<Props of={Icon} />
+
+The `Icon` component takes a single prop of `name`, which indicates which Icon
+should be displayed. The icon inherit the component text/font styles.

platform/ui/src/components/Icon/index.js

@@ -0,0 +1,2 @@
+import Icon from './Icon';
+export default Icon;