Start using IIconRegistry

Author: Frederic Collonval

package.json

@@ -31,6 +31,9 @@
     "style/*.css",
     "style/images/*.svg"
   ],
+  "sideEffects": [
+    "style/*.css"
+  ],
   "jupyterlab": {
     "extension": true,
     "discovery": {
@@ -46,14 +49,15 @@
     }
   },
   "dependencies": {
-    "@jupyterlab/application": "^1.0.0",
-    "@jupyterlab/apputils": "^1.0.0",
-    "@jupyterlab/console": "^1.0.0",
+    "@jupyterlab/application": "^1.1.0",
+    "@jupyterlab/apputils": "^1.1.0",
+    "@jupyterlab/console": "^1.1.0",
     "@jupyterlab/coreutils": "^3.0.0",
-    "@jupyterlab/filebrowser": "^1.0.0",
-    "@jupyterlab/mainmenu": "^1.0.0",
-    "@jupyterlab/services": "^4.0.0",
-    "@jupyterlab/terminal": "^1.0.0",
+    "@jupyterlab/filebrowser": "^1.1.0",
+    "@jupyterlab/mainmenu": "^1.1.0",
+    "@jupyterlab/services": "^4.1.0",
+    "@jupyterlab/terminal": "^1.1.0",
+    "@jupyterlab/ui-components": "^1.1.0",
     "@phosphor/widgets": "^1.8.0",
     "nbdime": "~5.0.1",
     "react": "~16.8.4",

src/componentsStyle/GitWidgetStyle.tsx

@@ -8,7 +8,3 @@ export const gitWidgetStyle = style({
   background: 'var(--jp-layout-color1)',
   fontSize: 'var(--jp-ui-font-size0)'
 });
-
-export const gitTabStyle = style({
-  backgroundImage: 'var(--jp-icon-git)'
-});

src/icons.ts

@@ -0,0 +1,11 @@
+import { IIconRegistry } from '@jupyterlab/ui-components';
+
+// icon svg import statements
+import gitSvg from '../style/images/git-icon.svg';
+
+export function registerGitIcons(iconRegistry: IIconRegistry) {
+  iconRegistry.addIcon({
+    name: 'git',
+    svg: gitSvg
+  });
+}

src/index.ts

@@ -1,33 +1,22 @@
-import { addCommands, CommandIDs } from './gitMenuCommands';
-
-import { PathExt } from '@jupyterlab/coreutils';
-
-import { GitWidget } from './components/GitWidget';
-
 import {
   ILayoutRestorer,
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-
+import { PathExt } from '@jupyterlab/coreutils';
 import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
-
 import { IMainMenu } from '@jupyterlab/mainmenu';
-
-import { Menu } from '@phosphor/widgets';
-
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
 import { Token } from '@phosphor/coreutils';
-
-import { gitTabStyle } from './componentsStyle/GitWidgetStyle';
-
+import { Menu } from '@phosphor/widgets';
+import { GitWidget } from './components/GitWidget';
 import { IDiffCallback } from './git';
-export { IDiffCallback } from './git';
-
-import '../style/variables.css';
-import '../style/diff.css';
-import '../style/diff.css';
+import { addCommands, CommandIDs } from './gitMenuCommands';
+import { registerGitIcons } from './icons';
 import { GitClone } from './widgets/gitClone';
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+
+export { IDiffCallback } from './git';
 
 export const EXTENSION_ID = 'jupyter.extensions.git_plugin';
 
@@ -78,7 +67,7 @@ export class GitExtension implements IGitExtension {
       renderMime
     );
     this.gitPlugin.id = 'jp-git-sessions';
-    this.gitPlugin.title.iconClass = `jp-SideBar-tabIcon ${gitTabStyle}`;
+    this.gitPlugin.title.iconClass = `jp-SideBar-tabIcon jp-GitIcon`;
     this.gitPlugin.title.caption = 'Git';
 
     // Let the application restorer track the running panel for restoration of
@@ -123,6 +112,9 @@ function activate(
   renderMime: IRenderMimeRegistry
 ): IGitExtension {
   const { commands } = app;
+
+  registerGitIcons(defaultIconRegistry);
+
   let gitExtension = new GitExtension(app, restorer, factory, renderMime);
 
   const category = 'Git';

src/svg.d.ts

@@ -0,0 +1,13 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+// including this file in a package allows for the use of import statements
+// with svg files. Example: `import xSvg from 'path/xSvg.svg'`
+
+// for use with raw-loader in Webpack.
+// The svg will be imported as a raw string
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}