cleanup, fixed vdom icon

packages/filebrowser/src/listing.ts

@@ -1759,6 +1759,7 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
+        // TODO: should inline svg icons still get the same className?
         icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
 
         if (fileType.iconName) {
@@ -1770,14 +1771,6 @@ export namespace DirListing {
             center: true,
             kind: 'listing'
           });
-
-          // // filthy hack to get the topbar tab icons
-          // defaultIconRegistry.override({
-          //   name: fileType.iconName,
-          //   className: ['p-TabBar-tabIcon', fileType.iconClass].join(' '),
-          //   center: true,
-          //   kind: 'tab'
-          // });
         } else {
           // add icon as CSS background image. Can't be styled using CSS
           icon.textContent = fileType.iconLabel || '';

packages/htmlviewer-extension/src/index.tsx

@@ -24,6 +24,11 @@ import {
  */
 const CSS_ICON_CLASS = 'jp-Html5Icon';
 
+/**
+ * The name for an HTML5 icon.
+ */
+const ICON_NAME = 'html5';
+
 /**
  * Command IDs used by the plugin.
  */
@@ -59,7 +64,7 @@ function activateHTMLViewer(
     extensions: ['.html'],
     mimeTypes: ['text/html'],
     iconClass: CSS_ICON_CLASS,
-    iconName: 'html5'
+    iconName: ICON_NAME
   };
   app.docRegistry.addFileType(ft);
 

packages/ui-components/src/icon/icon.ts

@@ -10,6 +10,7 @@ import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
 
 // filetype icons
 import html5Svg from '../../style/icons/filetype/html5.svg';
+import reactSvg from '../../style/icons/filetype/react.svg';
 
 // statusbar icons
 import kernelSvg from '../../style/icons/statusbar/kernel.svg';
@@ -31,6 +32,7 @@ export const defaultIcons: ReadonlyArray<Icon.IModel> = [
   { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
 
   { name: 'html5', svg: html5Svg },
+  { name: 'react', svg: reactSvg },
 
   { name: 'kernel', svg: kernelSvg },
   { name: 'line-form', svg: lineFormSvg },

packages/ui-components/src/style/icon.ts

@@ -45,7 +45,8 @@ const iconCSSDockPanelBar: NestedCSSProperties = {
 };
 
 const iconCSSListing: NestedCSSProperties = {
-  height: '16px'
+  height: '16px',
+  width: '16px'
 };
 
 const iconCSSSideBar: NestedCSSProperties = {

packages/ui-components/style/icons/statusbar/react.svg → packages/ui-components/style/icons/filetype/react.svg

@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
+	 viewBox="150 150 541.9 295.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
 <g>
 	<path class="jp-icon-brand2" fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
 		c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9

packages/vdom-extension/src/index.ts

@@ -20,7 +20,12 @@ import { RenderedVDOM, IVDOMTracker } from '@jupyterlab/vdom';
 /**
  * The CSS class for a VDOM icon.
  */
-const CSS_ICON_CLASS = 'jp-MaterialIcon jp-VDOMIcon';
+const CSS_ICON_CLASS = 'jp-ReactIcon';
+
+/**
+ * The name for a VDOM icon.
+ */
+const ICON_NAME = 'react';
 
 /**
  * The MIME type for VDOM.
@@ -83,7 +88,7 @@ const plugin: JupyterFrontEndPlugin<IVDOMTracker> = {
       mimeTypes: [MIME_TYPE],
       extensions: ['.vdom', '.vdom.json'],
       iconClass: CSS_ICON_CLASS,
-      iconName: 'react'
+      iconName: ICON_NAME
     });
 
     const factory = new MimeDocumentFactory({