all of the wrapped icons now get autogenerated by integrity

also had to revert the cleanup of createIcon's return type. The new
way didn't work since some template parameters weren't specified

buildutils/src/ensure-package.ts

@@ -21,6 +21,7 @@ const HEADER_TEMPLATE = `
 `;
 
 const ICON_IMPORTS_TEMPLATE = `
+import { createIcon } from './jlicon';
 import { Icon } from './interfaces';
 
 // icon svg import statements
@@ -32,6 +33,9 @@ export namespace IconImports {
     {{iconModelDeclarations}}
   ];
 }
+
+// wrapped icon definitions
+{{wrappedIconDefs}}
 `;
 
 const ICON_CSS_CLASSES_TEMPLATE = `
@@ -350,6 +354,7 @@ export async function ensureUiComponents(
   // build the per-icon import code
   let _iconImportStatements: string[] = [];
   let _iconModelDeclarations: string[] = [];
+  let _wrappedIconDefs: string[] = [];
   svgs.forEach(svg => {
     const name = utils.stem(svg);
     const svgpath = path
@@ -364,20 +369,25 @@ export async function ensureUiComponents(
       );
     } else {
       // load the icon svg using `import`
-      const nameCamel = utils.camelCase(name) + 'Svg';
+      const svgname = utils.camelCase(name) + 'Svg';
+      const iconname = utils.camelCase(name, true) + 'Icon';
 
-      _iconImportStatements.push(`import ${nameCamel} from '${svgpath}';`);
-      _iconModelDeclarations.push(`{ name: '${name}', svg: ${nameCamel} }`);
+      _iconImportStatements.push(`import ${svgname} from '${svgpath}';`);
+      _iconModelDeclarations.push(`{ name: '${name}', svg: ${svgname} }`);
+      _wrappedIconDefs.push(
+        `export const ${iconname} = createIcon('${name}', ${svgname});`
+      );
     }
   });
   const iconImportStatements = _iconImportStatements.join('\n');
   const iconModelDeclarations = _iconModelDeclarations.join(',\n');
+  const wrappedIconDefs = _wrappedIconDefs.join('\n');
 
   // generate the actual contents of the iconImports file
   const iconImportsPath = path.join(iconSrcDir, 'iconImports.ts');
   const iconImportsContents = utils.fromTemplate(
     HEADER_TEMPLATE + ICON_IMPORTS_TEMPLATE,
-    { funcName, iconImportStatements, iconModelDeclarations }
+    { funcName, iconImportStatements, iconModelDeclarations, wrappedIconDefs }
   );
   messages.push(...ensureFile(iconImportsPath, iconImportsContents));
 

packages/notebook/src/truststatus.tsx

@@ -6,7 +6,7 @@ import { INotebookModel, Notebook } from '.';
 
 import { Cell } from '@jupyterlab/cells';
 
-import { DefaultIconReact } from '@jupyterlab/ui-components';
+import { NotTrustedIcon, TrustedIcon } from '@jupyterlab/ui-components';
 
 import { toArray } from '@phosphor/algorithm';
 
@@ -45,11 +45,9 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   if (props.allCellsTrusted) {
-    return <DefaultIconReact name="trusted" top={'2px'} kind={'statusBar'} />;
+    return <TrustedIcon top={'2px'} kind={'statusBar'} />;
   } else {
-    return (
-      <DefaultIconReact name="not-trusted" top={'2px'} kind={'statusBar'} />
-    );
+    return <NotTrustedIcon top={'2px'} kind={'statusBar'} />;
   }
 }
 

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

@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensureUiComponents() in @jupyterlab/buildutils */
 
+import { createIcon } from './jlicon';
 import { Icon } from './interfaces';
 
 // icon svg import statements
@@ -76,3 +77,39 @@ export namespace IconImports {
     { name: 'stop', svg: stopSvg }
   ];
 }
+
+// wrapped icon definitions
+export const FileIcon = createIcon('file', fileSvg);
+export const FolderIcon = createIcon('folder', folderSvg);
+export const Html5Icon = createIcon('html5', html5Svg);
+export const ImageIcon = createIcon('image', imageSvg);
+export const JsonIcon = createIcon('json', jsonSvg);
+export const MarkdownIcon = createIcon('markdown', markdownSvg);
+export const NotebookIcon = createIcon('notebook', notebookSvg);
+export const PythonIcon = createIcon('python', pythonSvg);
+export const RKernelIcon = createIcon('r-kernel', rKernelSvg);
+export const ReactIcon = createIcon('react', reactSvg);
+export const SpreadsheetIcon = createIcon('spreadsheet', spreadsheetSvg);
+export const YamlIcon = createIcon('yaml', yamlSvg);
+export const BuildIcon = createIcon('build', buildSvg);
+export const ExtensionIcon = createIcon('extension', extensionSvg);
+export const PaletteIcon = createIcon('palette', paletteSvg);
+export const RunningIcon = createIcon('running', runningSvg);
+export const TabIcon = createIcon('tab', tabSvg);
+export const JupyterFaviconIcon = createIcon(
+  'jupyter-favicon',
+  jupyterFaviconSvg
+);
+export const KernelIcon = createIcon('kernel', kernelSvg);
+export const LineFormIcon = createIcon('line-form', lineFormSvg);
+export const NotTrustedIcon = createIcon('not-trusted', notTrustedSvg);
+export const TerminalIcon = createIcon('terminal', terminalSvg);
+export const TrustedIcon = createIcon('trusted', trustedSvg);
+export const AddIcon = createIcon('add', addSvg);
+export const CopyIcon = createIcon('copy', copySvg);
+export const CutIcon = createIcon('cut', cutSvg);
+export const PasteIcon = createIcon('paste', pasteSvg);
+export const RefreshIcon = createIcon('refresh', refreshSvg);
+export const RunIcon = createIcon('run', runSvg);
+export const SaveIcon = createIcon('save', saveSvg);
+export const StopIcon = createIcon('stop', stopSvg);

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

@@ -33,7 +33,7 @@ export function createIcon(
     }
   }
 
-  const JLIcon: JLIcon.IComponent = React.forwardRef(
+  const _JLIcon = React.forwardRef(
     (props: JLIcon.IProps, ref: React.RefObject<HTMLDivElement>) => {
       const { className, title, tag = 'div', ...propsStyle } = props;
       const Tag = tag;
@@ -59,6 +59,11 @@ export function createIcon(
     }
   );
 
+  // widen type to include .element
+  let JLIcon: typeof _JLIcon & {
+    element: (props: JLIcon.IProps) => HTMLElement;
+  } = _JLIcon as any;
+
   JLIcon.element = ({
     className,
     title,
@@ -109,14 +114,6 @@ export namespace JLIcon {
      */
     title?: string;
   }
-
-  /**
-   * The type of the react component-like object that gets
-   * returned by createIcon
-   */
-  export interface IComponent extends ReturnType<typeof React.forwardRef> {
-    element?: (props: IProps) => HTMLElement;
-  }
 }
 
 namespace Private {