removed all refs to defaultIconRegistry outside of ui-components pkgs

packages/apputils-extension/src/index.ts

@@ -25,7 +25,7 @@ import { URLExt } from '@jupyterlab/coreutils';
 
 import { IStateDB, StateDB } from '@jupyterlab/statedb';
 
-import { defaultIconRegistry } from '@jupyterlab/ui-components';
+import { jupyterFaviconIcon } from '@jupyterlab/ui-components';
 
 import { PromiseDelegate } from '@lumino/coreutils';
 
@@ -149,8 +149,7 @@ const splash: JupyterFrontEndPlugin<ISplashScreen> = {
     galaxy.id = 'galaxy';
     logo.id = 'main-logo';
 
-    defaultIconRegistry.icon({
-      name: 'jupyter-favicon',
+    jupyterFaviconIcon.element({
       container: logo,
       center: true,
       kind: 'splash'

packages/celltags/src/addwidget.ts

@@ -1,6 +1,6 @@
 import { Widget } from '@lumino/widgets';
 
-import { defaultIconRegistry } from '@jupyterlab/ui-components';
+import { addIcon } from '@jupyterlab/ui-components';
 
 import { TagTool } from './tool';
 
@@ -31,10 +31,8 @@ export class AddWidget extends Widget {
     let tag = document.createElement('div');
     tag.className = 'tag-holder';
     tag.appendChild(text);
-    let img = document.createElement('span');
-    defaultIconRegistry.icon({
-      name: 'add',
-      container: img,
+    let iconContainer = addIcon.element({
+      tag: 'span',
       center: true,
       height: '18px',
       width: '18px',
@@ -42,7 +40,7 @@ export class AddWidget extends Widget {
       marginRight: '-5px'
     });
     this.addClass('unapplied-tag');
-    tag.appendChild(img);
+    tag.appendChild(iconContainer);
     this.node.appendChild(tag);
   }
 

packages/celltags/src/widget.ts

@@ -1,6 +1,6 @@
 import { Widget } from '@lumino/widgets';
 
-import { defaultIconRegistry } from '@jupyterlab/ui-components';
+import { checkIcon } from '@jupyterlab/ui-components';
 
 import { TagTool } from './tool';
 
@@ -29,10 +29,8 @@ export class TagWidget extends Widget {
     let tag = document.createElement('div');
     tag.className = 'tag-holder';
     tag.appendChild(text);
-    let img = document.createElement('span');
-    defaultIconRegistry.icon({
-      name: 'check',
-      container: img,
+    let iconContainer = checkIcon.element({
+      tag: 'span',
       center: true,
       height: '18px',
       width: '18px',
@@ -43,9 +41,9 @@ export class TagWidget extends Widget {
       this.addClass('applied-tag');
     } else {
       this.addClass('unapplied-tag');
-      img.style.display = 'none';
+      iconContainer.style.display = 'none';
     }
-    tag.appendChild(img);
+    tag.appendChild(iconContainer);
     this.node.appendChild(tag);
   }
 

packages/filebrowser/src/crumbs.ts

@@ -5,19 +5,19 @@ import { ArrayExt } from '@lumino/algorithm';
 
 import { Message } from '@lumino/messaging';
 
-import { IDragEvent } from '@lumino/dragdrop';
-
 import { ElementExt } from '@lumino/domutils';
 
+import { IDragEvent } from '@lumino/dragdrop';
+
 import { Widget } from '@lumino/widgets';
 
 import { DOMUtils, showErrorMessage } from '@jupyterlab/apputils';
 
-import { PathExt, PageConfig } from '@jupyterlab/coreutils';
+import { PageConfig, PathExt } from '@jupyterlab/coreutils';
 
 import { renameFile } from '@jupyterlab/docmanager';
 
-import { defaultIconRegistry } from '@jupyterlab/ui-components';
+import { folderIcon } from '@jupyterlab/ui-components';
 
 import { FileBrowserModel } from './model';
 
@@ -31,11 +31,6 @@ const MATERIAL_CLASS = 'jp-MaterialIcon';
  */
 const BREADCRUMB_CLASS = 'jp-BreadCrumbs';
 
-/**
- * The class name for the folder icon for the breadcrumbs home
- */
-const BREADCRUMB_HOME = 'jp-FolderIcon';
-
 /**
  * The class name for the breadcrumbs home node
  */
@@ -363,8 +358,7 @@ namespace Private {
    */
   export function createCrumbs(): ReadonlyArray<HTMLElement> {
     let home = document.createElement('span');
-    defaultIconRegistry.icon({
-      name: BREADCRUMB_HOME,
+    folderIcon.element({
       className: BREADCRUMB_HOME_CLASS,
       container: home,
       kind: 'breadCrumb'

packages/filebrowser/src/listing.ts

@@ -20,12 +20,7 @@ import { DocumentRegistry } from '@jupyterlab/docregistry';
 
 import { Contents } from '@jupyterlab/services';
 
-import {
-  classes,
-  fileIcon,
-  IIconRegistry,
-  JLIcon
-} from '@jupyterlab/ui-components';
+import { fileIcon, IIconRegistry, JLIcon } from '@jupyterlab/ui-components';
 
 import {
   ArrayExt,
@@ -1812,11 +1807,21 @@ export namespace DirListing {
       const text = DOMUtils.findElement(node, ITEM_TEXT_CLASS);
       const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
-      let icon = fileType?.iconRenderer ? fileType.iconRenderer : (fileType?.iconClass ? JLIcon.get(fileType.iconClass) : fileIcon);
-      let iconClass = classes(ITEM_ICON_CLASS, fileType?.iconClass);
+      const iconProps: JLIcon.IProps = {
+        className: ITEM_ICON_CLASS,
+        container: iconContainer,
+        center: true,
+        kind: 'listing'
+      };
 
       // render the icon svg node
-      icon.element({className: iconClass, container: iconContainer, center: true, kind: 'listing'});
+      if (fileType?.iconRenderer) {
+        fileType.iconRenderer.element(iconProps);
+      } else if (fileType?.iconClass) {
+        JLIcon.getElement({ name: fileType.iconClass, ...iconProps });
+      } else {
+        fileIcon.element(iconProps);
+      }
 
       let hoverText = 'Name: ' + model.name;
       // add file size to pop up if its available

packages/launcher/src/index.tsx

@@ -7,11 +7,7 @@ import {
   VDomRenderer
 } from '@jupyterlab/apputils';
 
-import {
-  classes,
-  DefaultIconReact,
-  defaultIconRegistry
-} from '@jupyterlab/ui-components';
+import { classes, JLIcon } from '@jupyterlab/ui-components';
 
 import {
   ArrayExt,
@@ -203,20 +199,15 @@ export class Launcher extends VDomRenderer<LauncherModel> {
         section = (
           <div className="jp-Launcher-section" key={cat}>
             <div className="jp-Launcher-sectionHeader">
-              {kernel && defaultIconRegistry.contains(iconClass) ? (
-                <DefaultIconReact
+              {kernel && (
+                <JLIcon.getReact
                   name={iconClass}
-                  className={''}
-                  center={true}
-                  kind={'launcherSection'}
-                />
-              ) : (
-                <div
                   className={classes(
-                    iconClass,
                     'jp-Launcher-sectionIcon',
                     'jp-Launcher-icon'
                   )}
+                  center={true}
+                  kind="launcherSection"
                 />
               )}
               <h2 className="jp-Launcher-sectionTitle">{cat}</h2>
@@ -415,7 +406,6 @@ function Card(
   };
 
   // Return the VDOM element.
-  const iconClass = kernel ? '' : commands.iconClass(command, args);
   return (
     <div
       className="jp-LauncherCard"
@@ -426,27 +416,24 @@ function Card(
       data-category={item.category || 'Other'}
       key={Private.keyProperty.get(item)}
     >
-      {kernel ? (
-        <div className="jp-LauncherCard-icon">
-          {item.kernelIconUrl ? (
+      <div className="jp-LauncherCard-icon">
+        {kernel ? (
+          item.kernelIconUrl ? (
             <img src={item.kernelIconUrl} className="jp-Launcher-kernelIcon" />
           ) : (
             <div className="jp-LauncherCard-noKernelIcon">
               {label[0].toUpperCase()}
             </div>
-          )}
-        </div>
-      ) : (
-        <div className="jp-LauncherCard-icon">
-          <DefaultIconReact
-            name={`${iconClass} jp-Launcher-icon`}
-            className={''}
-            fallback={true}
+          )
+        ) : (
+          <JLIcon.getReact
+            name={commands.iconClass(command, args)}
+            className="jp-Launcher-icon"
             center={true}
-            kind={'launcherCard'}
+            kind="launcherCard"
           />
-        </div>
-      )}
+        )}
+      </div>
       <div className="jp-LauncherCard-label" title={title}>
         <p>{label}</p>
       </div>

packages/settingeditor/src/pluginlist.tsx

@@ -261,7 +261,6 @@ namespace Private {
       const itemTitle = `${schema.description}\n${id}\n${version}`;
       const iconClass = getHint(ICON_CLASS_KEY, registry, plugin);
       const iconTitle = getHint(ICON_LABEL_KEY, registry, plugin);
-      const icon = JLIcon.get(iconClass, settingsIcon);
 
       return (
         <li
@@ -270,7 +269,13 @@ namespace Private {
           key={id}
           title={itemTitle}
         >
-          <icon.react title={iconTitle} tag={'span'} kind={'settingsEditor'} />
+          <JLIcon.getReact
+            name={iconClass}
+            fallback={settingsIcon}
+            title={iconTitle}
+            tag="span"
+            kind="settingsEditor"
+          />
           <span>{schema.title || id}</span>
         </li>
       );

packages/ui-components/src/icon/jlicon.tsx

@@ -14,15 +14,15 @@ import badSvg from '../../style/debug/bad.svg';
 import blankSvg from '../../style/debug/blank.svg';
 
 export class JLIcon {
-  private static _instances = new Map<string, JLIcon>();
   private static _debug: boolean = false;
+  private static _instances = new Map<string, JLIcon>();
 
   /**
-   * Get any existing JLIcon instance by name
+   * Get any existing JLIcon instance by name.
    *
-   * @param name - Name of the JLIcon instance to fetch
+   * @param name - name of the JLIcon instance to fetch
    *
-   * @param fallback - Optional default JLIcon instance to use if
+   * @param fallback - optional default JLIcon instance to use if
    * name is not found
    *
    * @returns A JLIcon instance
@@ -48,17 +48,17 @@ export class JLIcon {
    * Get any existing JLIcon instance by name, construct a DOM element
    * from it, then return said element.
    *
-   * @param name - Name of the JLIcon instance to fetch
+   * @param name - name of the JLIcon instance to fetch
    *
-   * @param fallback - If left undefined, use automatic fallback to
+   * @param fallback - if left undefined, use automatic fallback to
    * icons-as-css-background behavior: elem will be constructed using
    * a blank icon with `elem.className = classes(name, props.className)`,
    * where elem is the return value. Otherwise, fallback can be used to
    * define the default JLIcon instance, returned whenever lookup fails
    *
-   * @param props = passed directly to JLIcon.element
+   * @param props - passed directly to JLIcon.element
    *
-   * @returns An SVGElement
+   * @returns an SVGElement
    */
   static getElement({
     name,
@@ -74,6 +74,23 @@ export class JLIcon {
     return icon.element(props);
   }
 
+  /**
+   * Get any existing JLIcon instance by name, construct a React element
+   * from it, then return said element.
+   *
+   * @param name - name of the JLIcon instance to fetch
+   *
+   * @param fallback - if left undefined, use automatic fallback to
+   * icons-as-css-background behavior: elem will be constructed using
+   * a blank icon with `elem.className = classes(name, props.className)`,
+   * where elem is the return value. Otherwise, fallback can be used to
+   * define the default JLIcon instance, used to construct the return
+   * elem whenever lookup fails
+   *
+   * @param props - passed directly to JLIcon.react
+   *
+   * @returns a React element
+   */
   static getReact({
     name,
     fallback,
@@ -89,9 +106,9 @@ export class JLIcon {
   }
 
   /**
-   * Toggle icon debug from off-to-on, or vice-versa
+   * Toggle icon debug from off-to-on, or vice-versa.
    *
-   * @param debug - Optional boolean to force debug on or off
+   * @param debug - optional boolean to force debug on or off
    */
   static toggleDebug(debug?: boolean) {
     JLIcon._debug = debug ?? !JLIcon._debug;
@@ -133,14 +150,19 @@ export class JLIcon {
       return null;
     }
 
+    let ret: HTMLElement;
     if (container) {
       // take ownership by removing any existing children
       while (container.firstChild) {
         container.firstChild.remove();
       }
+
+      ret = svgElement;
     } else {
       // create a container if needed
       container = document.createElement(tag);
+
+      ret = container;
     }
 
     this._initContainer({ container, className, propsStyle, title });
@@ -148,7 +170,7 @@ export class JLIcon {
     // add the svg node to the container
     container.appendChild(svgElement);
 
-    return svgElement;
+    return ret;
   }
 
   render(host: HTMLElement, props: JLIcon.IProps = {}): void {
@@ -327,9 +349,6 @@ export namespace JLIcon {
   export type IReact = React.ForwardRefExoticComponent<IReactProps>;
 }
 
-export const badIcon = new JLIcon({ name: 'bad', svgstr: badSvg });
-export const blankIcon = new JLIcon({ name: 'blank', svgstr: blankSvg });
-
 namespace Private {
   export function nameToClassName(name: string): string {
     return 'jp-' + Text.camelCase(name, true) + 'Icon';
@@ -347,3 +366,7 @@ namespace Private {
     }
   }
 }
+
+// need to be at the bottom since constructor depends on Private
+export const badIcon = new JLIcon({ name: 'bad', svgstr: badSvg });
+export const blankIcon = new JLIcon({ name: 'blank', svgstr: blankSvg });