Feat/ui v2 ohif logo svg (#1506)

* Adding new icons

* Introducing Svg component

* Adding ohif logo into header

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import getIcon from './getIcon';
 
 const Icon = ({ name, ...otherProps }) => {
-  return <React.Fragment>{getIcon(name, otherProps)}</React.Fragment>;
+  return <React.Fragment>{getIcon(name, { ...otherProps })}</React.Fragment>;
 };
 
 Icon.propTypes = {

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

@@ -7,10 +7,12 @@ 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 logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
+import notificationwarningDiamond from './../../assets/icons/notificationwarning-diamond.svg';
 import settings from './../../assets/icons/settings.svg';
+import sorting from './../../assets/icons/sorting.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,
@@ -20,6 +22,8 @@ const ICONS = {
   'info-link': infoLink,
   'launch-arrow': launchArrow,
   'launch-info': launchInfo,
+  'logo-ohif-small': logoOhifSmall,
+  'notificationwarning-diamond': notificationwarningDiamond,
   settings: settings,
   'sorting-active-down': sortingActiveDown,
   'sorting-active-up': sortingActiveUp,

platform/ui/src/components/Svg/Svg.jsx

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

platform/ui/src/components/Svg/getSvg.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+// Svgs
+import logoOhif from './../../assets/svgs/logo-ohif.svg';
+
+const SVGS = {
+  'logo-ohif': logoOhif,
+};
+
+/**
+ * Return the matching SVG as a React Component.
+ * Results in an inlined SVG Element. If there's no match,
+ * return `null`
+ */
+export default function getSvg(key, props) {
+  if (!key || !SVGS[key]) {
+    return React.createElement('div', null, 'Missing SVG');
+  }
+
+  return React.createElement(SVGS[key], props);
+}
+
+export { SVGS };

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

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

platform/ui/src/components/index.js

@@ -2,7 +2,8 @@ import Button from './Button';
 import ButtonGroup from './ButtonGroup';
 import Icon from './Icon';
 import IconButton from './IconButton';
+import Svg from './Svg';
 import ThemeWrapper from './ThemeWrapper/';
 import Typography from './Typography';
 
-export { Button, ButtonGroup, Icon, IconButton, ThemeWrapper, Typography };
+export { Button, ButtonGroup, Icon, IconButton, Svg, ThemeWrapper, Typography };