Use more IIconRegistry

Author: Frederic Collonval

src/components/SinglePastCommitInfo.tsx

@@ -1,4 +1,6 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
 import * as React from 'react';
 import { classes } from 'typestyle/';
 import { fileIconStyle } from '../componentsStyle/FileItemStyle';
@@ -13,25 +15,21 @@ import {
   commitDetailStyle,
   commitOverviewNumbers,
   commitStyle,
-  deletionIconStyle,
   diffIconStyle,
   floatRightStyle,
   iconStyle,
-  insertionIconStyle,
-  numberofChangedFilesStyle,
   revertButtonStyle
 } from '../componentsStyle/SinglePastCommitInfoStyle';
 import {
-  ICommitModifiedFile,
   Git,
-  ISingleCommitInfo,
-  IDiffCallback
+  ICommitModifiedFile,
+  IDiffCallback,
+  ISingleCommitInfo
 } from '../git';
+import { isDiffSupported } from './diff/Diff';
+import { openDiffView } from './diff/DiffWidget';
 import { parseFileExtension } from './FileList';
 import { ResetDeleteSingleCommit } from './ResetDeleteSingleCommit';
-import { openDiffView } from './diff/DiffWidget';
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { isDiffSupported } from './diff/Diff';
 
 export interface ISinglePastCommitInfoProps {
   topRepoPath: string;
@@ -141,15 +139,30 @@ export class SinglePastCommitInfo extends React.Component<
         <div className={commitStyle}>
           <div className={commitOverviewNumbers}>
             <span>
-              <span className={classes(iconStyle, numberofChangedFilesStyle)} />
+              {defaultIconRegistry.iconReact({
+                name: 'file',
+                className: classes(iconStyle),
+                tag: 'span',
+                title: '# Files Changed'
+              })}
               {this.state.filesChanged}
             </span>
             <span>
-              <span className={classes(iconStyle, insertionIconStyle)} />
+              {defaultIconRegistry.iconReact({
+                name: 'git-insertionsMade',
+                className: classes(iconStyle),
+                tag: 'span',
+                title: '# Insertions'
+              })}
               {this.state.insertionCount}
             </span>
             <span>
-              <span className={classes(iconStyle, deletionIconStyle)} />
+              {defaultIconRegistry.iconReact({
+                name: 'git-deletionsMade',
+                className: classes(iconStyle),
+                tag: 'span',
+                title: '# Deletions'
+              })}
               {this.state.deletionCount}
             </span>
           </div>

src/componentsStyle/SinglePastCommitInfoStyle.tsx

@@ -67,26 +67,11 @@ export const commitDetailFilePathStyle = style({
 
 export const iconStyle = style({
   display: 'inline-block',
-  width: '20px',
+  width: '13px',
   height: '13px',
-  backgroundPosition: 'center',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: '14px',
   right: '10px'
 });
 
-export const numberofChangedFilesStyle = style({
-  backgroundImage: 'var(--jp-icon-file)'
-});
-
-export const insertionIconStyle = style({
-  backgroundImage: 'var(--jp-icon-insertions-made)'
-});
-
-export const deletionIconStyle = style({
-  backgroundImage: 'var(--jp-icon-deletions-made)'
-});
-
 export const diffIconStyle = style({
   backgroundColor: 'transparent',
   backgroundPosition: 'center',

src/icons.ts

@@ -2,10 +2,22 @@ import { IIconRegistry } from '@jupyterlab/ui-components';
 
 // icon svg import statements
 import gitSvg from '../style/images/git-icon.svg';
+import deletionsMadeSvg from '../style/images/deletions-made-icon.svg';
+import insertionsMadeSvg from '../style/images/insertions-made-icon.svg';
 
 export function registerGitIcons(iconRegistry: IIconRegistry) {
-  iconRegistry.addIcon({
-    name: 'git',
-    svg: gitSvg
-  });
+  iconRegistry.addIcon(
+    {
+      name: 'git',
+      svg: gitSvg
+    },
+    {
+      name: 'git-deletionsMade',
+      svg: deletionsMadeSvg
+    },
+    {
+      name: 'git-insertionsMade',
+      svg: insertionsMadeSvg
+    }
+  );
 }

style/images/deletions-made-icon-white.svg

@@ -27,11 +27,9 @@
 
 [data-jp-theme-light='true'] {
   --jp-icon-arrow-down: url('./images/arrow-down.svg');
-  --jp-icon-deletions-made: url('./images/deletions-made-icon.svg');
   --jp-icon-discard-file: url('./images/discard.svg');
   --jp-icon-git-pull: url('./images/git-pull.svg');
   --jp-icon-git-push: url('./images/git-push.svg');
-  --jp-icon-insertions-made: url('./images/insertions-made-icon.svg');
   --jp-icon-move-file-down: url('./images/move-file-down.svg');
   --jp-icon-move-file-up: url('./images/move-file-up.svg');
   --jp-icon-plus: url('./images/plus.svg');
@@ -41,11 +39,9 @@
 
 [data-jp-theme-light='false'] {
   --jp-icon-arrow-down: url('./images/arrow-down-white.svg');
-  --jp-icon-deletions-made: url('./images/deletions-made-icon-white.svg');
   --jp-icon-discard-file: url('./images/discard-selected.svg');
   --jp-icon-git-pull: url('./images/git-pull-white.svg');
   --jp-icon-git-push: url('./images/git-push-white.svg');
-  --jp-icon-insertions-made: url('./images/insertions-made-icon-white.svg');
   --jp-icon-move-file-down-white: url('./images/move-file-down-hover.svg');
   --jp-icon-move-file-up: url('./images/move-file-up-hover.svg');
   --jp-icon-plus: url('./images/plus-white.svg');