made react-svg play nicely with the existing typestyle stuff

packages/statusbar/src/components/icon.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import * as React from 'react';
+import React, { ComponentType, HTMLAttributes } from 'react';
 
 import { classes, style } from 'typestyle/lib';
 
@@ -34,38 +34,27 @@ export function IconItem(
   );
 }
 
-// /**
-//  * A namespace for IconItem statics.
-//  */
-// export namespace SVGIconItem {
-//   /**
-//    * Props for an IconItem
-//    */
-//   export interface IProps {
-//     /**
-//      * The inline svg
-//      */
-//     src: string;
-//   }
-// }
-//
-// export function SVGIconItem(
-//   props: SVGIconItem.IProps &
-//     React.HTMLAttributes<HTMLImageElement> & {
-//     offset: { x: number; y: number };
-//   }
-// ): React.ReactElement<SVGIconItem.IProps> {
-//   const { src, className, offset } = props;
-//   return (
-//     <img
-//      className={classes(className, style(icon(offset)))}
-//      src={src}
-//     />
-//   );
-// }
+/**
+ * A namespace for IconItem statics.
+ */
+export namespace SVGIconItem {
+  /**
+   * Props for an IconItem
+   */
+  export interface IProps {
+    /**
+     * The inline svg
+     */
+    Src: ComponentType<HTMLAttributes<SVGElement>>;
+  }
+}
 
-// export default class SVGIcon extends Component {
-//   render () {
-//     return <Icon className='normal' />;
-//   }
-// };
+export function SVGIconItem(
+  props: SVGIconItem.IProps &
+    React.HTMLAttributes<HTMLImageElement> & {
+      offset: { x: number; y: number };
+    }
+): React.ReactElement<SVGIconItem.IProps> {
+  const { Src, className, offset } = props;
+  return <Src className={classes(className, style(icon(offset)))} />;
+}

packages/statusbar/src/defaults/runningSessions.tsx

@@ -13,7 +13,13 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import { GroupItem, IconItem, interactiveItem, TextItem } from '..';
+import {
+  GroupItem,
+  IconItem,
+  SVGIconItem,
+  interactiveItem,
+  TextItem
+} from '..';
 
 import KernelIcon from '../../style/kernel-icon.svg';
 
@@ -40,7 +46,7 @@ function RunningSessionsComponent(
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <KernelIcon />
+        <SVGIconItem Src={KernelIcon} offset={{ x: 0, y: 2 }} />
       </GroupItem>
     </GroupItem>
   );