first working example of a correctly imported svg

packages/statusbar/src/components/icon.tsx

@@ -33,3 +33,39 @@ export function IconItem(
     <div className={classes(className, source, style(icon()))} {...rest} />
   );
 }
+
+// /**
+//  * 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}
+//     />
+//   );
+// }
+
+// export default class SVGIcon extends Component {
+//   render () {
+//     return <Icon className='normal' />;
+//   }
+// };

packages/statusbar/src/defaults/runningSessions.tsx

@@ -15,6 +15,8 @@ import {
 
 import { GroupItem, IconItem, interactiveItem, TextItem } from '..';
 
+import KernelIcon from '../../style/kernel-icon.svg';
+
 /**
  * Half spacing between subitems in a status item.
  */
@@ -34,11 +36,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconItem source={'jp-StatusItem-terminal'} />
+        <IconItem source={'jp-StatusItem-terminal'} offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconItem source={'jp-StatusItem-kernel'} />
+        <KernelIcon />
       </GroupItem>
     </GroupItem>
   );