added namespacing to the JLIcon name prop

buildutils/src/ensure-package.ts

@@ -355,6 +355,7 @@ export async function ensureUiComponents(
   dorequire: boolean = false
 ): Promise<string[]> {
   const funcName = 'ensureUiComponents';
+  const pkgName = utils.stem(pkgPath);
   let messages: string[] = [];
 
   const svgs = glob.sync(path.join(pkgPath, 'style/icons', '**/*.svg'));
@@ -374,18 +375,19 @@ export async function ensureUiComponents(
 
     const svgname = utils.camelCase(name) + 'Svg';
     const iconname = utils.camelCase(name) + 'Icon';
+    const qualname = [pkgName, utils.stem(svg)].join(':');
 
     if (dorequire) {
       // load the icon svg using `require`
       _jliconConstruction.push(
-        `export const ${iconname} = new JLIcon({ name: '${name}', svgstr: require('${svgpath}').default });`
+        `export const ${iconname} = new JLIcon({ name: '${qualname}', svgstr: require('${svgpath}').default });`
       );
     } else {
       // load the icon svg using `import`
       _iconImportStatements.push(`import ${svgname} from '${svgpath}';`);
 
       _jliconConstruction.push(
-        `export const ${iconname} = new JLIcon({ name: '${name}', svgstr: ${svgname} });`
+        `export const ${iconname} = new JLIcon({ name: '${qualname}', svgstr: ${svgname} });`
       );
     }
   });

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

@@ -74,67 +74,67 @@ import stopSvg from '../../style/icons/toolbar/stop.svg';
 import undoSvg from '../../style/icons/toolbar/undo.svg';
 
 // JLIcon instance construction
-export const caretDownEmptyThinIcon = new JLIcon({ name: 'caret-down-empty-thin', svgstr: caretDownEmptyThinSvg });
-export const caretDownEmptyIcon = new JLIcon({ name: 'caret-down-empty', svgstr: caretDownEmptySvg });
-export const caretDownIcon = new JLIcon({ name: 'caret-down', svgstr: caretDownSvg });
-export const caretLeftIcon = new JLIcon({ name: 'caret-left', svgstr: caretLeftSvg });
-export const caretRightIcon = new JLIcon({ name: 'caret-right', svgstr: caretRightSvg });
-export const caretUpEmptyThinIcon = new JLIcon({ name: 'caret-up-empty-thin', svgstr: caretUpEmptyThinSvg });
-export const caretUpIcon = new JLIcon({ name: 'caret-up', svgstr: caretUpSvg });
-export const consoleIcon = new JLIcon({ name: 'console', svgstr: consoleSvg });
-export const fileIcon = new JLIcon({ name: 'file', svgstr: fileSvg });
-export const folderIcon = new JLIcon({ name: 'folder', svgstr: folderSvg });
-export const html5Icon = new JLIcon({ name: 'html5', svgstr: html5Svg });
-export const imageIcon = new JLIcon({ name: 'image', svgstr: imageSvg });
-export const inspectorIcon = new JLIcon({ name: 'inspector', svgstr: inspectorSvg });
-export const jsonIcon = new JLIcon({ name: 'json', svgstr: jsonSvg });
-export const keyboardIcon = new JLIcon({ name: 'keyboard', svgstr: keyboardSvg });
-export const launcherIcon = new JLIcon({ name: 'launcher', svgstr: launcherSvg });
-export const markdownIcon = new JLIcon({ name: 'markdown', svgstr: markdownSvg });
-export const notebookIcon = new JLIcon({ name: 'notebook', svgstr: notebookSvg });
-export const pythonIcon = new JLIcon({ name: 'python', svgstr: pythonSvg });
-export const rKernelIcon = new JLIcon({ name: 'r-kernel', svgstr: rKernelSvg });
-export const reactIcon = new JLIcon({ name: 'react', svgstr: reactSvg });
-export const settingsIcon = new JLIcon({ name: 'settings', svgstr: settingsSvg });
-export const spreadsheetIcon = new JLIcon({ name: 'spreadsheet', svgstr: spreadsheetSvg });
-export const textEditorIcon = new JLIcon({ name: 'text-editor', svgstr: textEditorSvg });
-export const vegaIcon = new JLIcon({ name: 'vega', svgstr: vegaSvg });
-export const yamlIcon = new JLIcon({ name: 'yaml', svgstr: yamlSvg });
-export const jupyterFaviconIcon = new JLIcon({ name: 'jupyter-favicon', svgstr: jupyterFaviconSvg });
-export const jupyterIcon = new JLIcon({ name: 'jupyter', svgstr: jupyterSvg });
-export const jupyterlabWordmarkIcon = new JLIcon({ name: 'jupyterlab-wordmark', svgstr: jupyterlabWordmarkSvg });
-export const caseSensitiveIcon = new JLIcon({ name: 'case-sensitive', svgstr: caseSensitiveSvg });
-export const regexIcon = new JLIcon({ name: 'regex', svgstr: regexSvg });
-export const buildIcon = new JLIcon({ name: 'build', svgstr: buildSvg });
-export const extensionIcon = new JLIcon({ name: 'extension', svgstr: extensionSvg });
-export const paletteIcon = new JLIcon({ name: 'palette', svgstr: paletteSvg });
-export const runningIcon = new JLIcon({ name: 'running', svgstr: runningSvg });
-export const tabIcon = new JLIcon({ name: 'tab', svgstr: tabSvg });
-export const kernelIcon = new JLIcon({ name: 'kernel', svgstr: kernelSvg });
-export const lineFormIcon = new JLIcon({ name: 'line-form', svgstr: lineFormSvg });
-export const listIcon = new JLIcon({ name: 'list', svgstr: listSvg });
-export const notTrustedIcon = new JLIcon({ name: 'not-trusted', svgstr: notTrustedSvg });
-export const terminalIcon = new JLIcon({ name: 'terminal', svgstr: terminalSvg });
-export const trustedIcon = new JLIcon({ name: 'trusted', svgstr: trustedSvg });
-export const addIcon = new JLIcon({ name: 'add', svgstr: addSvg });
-export const bugIcon = new JLIcon({ name: 'bug', svgstr: bugSvg });
-export const checkIcon = new JLIcon({ name: 'check', svgstr: checkSvg });
-export const circleEmptyIcon = new JLIcon({ name: 'circle-empty', svgstr: circleEmptySvg });
-export const circleIcon = new JLIcon({ name: 'circle', svgstr: circleSvg });
-export const closeIcon = new JLIcon({ name: 'close', svgstr: closeSvg });
-export const copyIcon = new JLIcon({ name: 'copy', svgstr: copySvg });
-export const cutIcon = new JLIcon({ name: 'cut', svgstr: cutSvg });
-export const downloadIcon = new JLIcon({ name: 'download', svgstr: downloadSvg });
-export const editIcon = new JLIcon({ name: 'edit', svgstr: editSvg });
-export const ellipsesIcon = new JLIcon({ name: 'ellipses', svgstr: ellipsesSvg });
-export const fileUploadIcon = new JLIcon({ name: 'file-upload', svgstr: fileUploadSvg });
-export const filterListIcon = new JLIcon({ name: 'filter-list', svgstr: filterListSvg });
-export const linkIcon = new JLIcon({ name: 'link', svgstr: linkSvg });
-export const newFolderIcon = new JLIcon({ name: 'new-folder', svgstr: newFolderSvg });
-export const pasteIcon = new JLIcon({ name: 'paste', svgstr: pasteSvg });
-export const refreshIcon = new JLIcon({ name: 'refresh', svgstr: refreshSvg });
-export const runIcon = new JLIcon({ name: 'run', svgstr: runSvg });
-export const saveIcon = new JLIcon({ name: 'save', svgstr: saveSvg });
-export const searchIcon = new JLIcon({ name: 'search', svgstr: searchSvg });
-export const stopIcon = new JLIcon({ name: 'stop', svgstr: stopSvg });
-export const undoIcon = new JLIcon({ name: 'undo', svgstr: undoSvg });
+export const caretDownEmptyThinIcon = new JLIcon({ name: 'ui-components:caret-down-empty-thin', svgstr: caretDownEmptyThinSvg });
+export const caretDownEmptyIcon = new JLIcon({ name: 'ui-components:caret-down-empty', svgstr: caretDownEmptySvg });
+export const caretDownIcon = new JLIcon({ name: 'ui-components:caret-down', svgstr: caretDownSvg });
+export const caretLeftIcon = new JLIcon({ name: 'ui-components:caret-left', svgstr: caretLeftSvg });
+export const caretRightIcon = new JLIcon({ name: 'ui-components:caret-right', svgstr: caretRightSvg });
+export const caretUpEmptyThinIcon = new JLIcon({ name: 'ui-components:caret-up-empty-thin', svgstr: caretUpEmptyThinSvg });
+export const caretUpIcon = new JLIcon({ name: 'ui-components:caret-up', svgstr: caretUpSvg });
+export const consoleIcon = new JLIcon({ name: 'ui-components:console', svgstr: consoleSvg });
+export const fileIcon = new JLIcon({ name: 'ui-components:file', svgstr: fileSvg });
+export const folderIcon = new JLIcon({ name: 'ui-components:folder', svgstr: folderSvg });
+export const html5Icon = new JLIcon({ name: 'ui-components:html5', svgstr: html5Svg });
+export const imageIcon = new JLIcon({ name: 'ui-components:image', svgstr: imageSvg });
+export const inspectorIcon = new JLIcon({ name: 'ui-components:inspector', svgstr: inspectorSvg });
+export const jsonIcon = new JLIcon({ name: 'ui-components:json', svgstr: jsonSvg });
+export const keyboardIcon = new JLIcon({ name: 'ui-components:keyboard', svgstr: keyboardSvg });
+export const launcherIcon = new JLIcon({ name: 'ui-components:launcher', svgstr: launcherSvg });
+export const markdownIcon = new JLIcon({ name: 'ui-components:markdown', svgstr: markdownSvg });
+export const notebookIcon = new JLIcon({ name: 'ui-components:notebook', svgstr: notebookSvg });
+export const pythonIcon = new JLIcon({ name: 'ui-components:python', svgstr: pythonSvg });
+export const rKernelIcon = new JLIcon({ name: 'ui-components:r-kernel', svgstr: rKernelSvg });
+export const reactIcon = new JLIcon({ name: 'ui-components:react', svgstr: reactSvg });
+export const settingsIcon = new JLIcon({ name: 'ui-components:settings', svgstr: settingsSvg });
+export const spreadsheetIcon = new JLIcon({ name: 'ui-components:spreadsheet', svgstr: spreadsheetSvg });
+export const textEditorIcon = new JLIcon({ name: 'ui-components:text-editor', svgstr: textEditorSvg });
+export const vegaIcon = new JLIcon({ name: 'ui-components:vega', svgstr: vegaSvg });
+export const yamlIcon = new JLIcon({ name: 'ui-components:yaml', svgstr: yamlSvg });
+export const jupyterFaviconIcon = new JLIcon({ name: 'ui-components:jupyter-favicon', svgstr: jupyterFaviconSvg });
+export const jupyterIcon = new JLIcon({ name: 'ui-components:jupyter', svgstr: jupyterSvg });
+export const jupyterlabWordmarkIcon = new JLIcon({ name: 'ui-components:jupyterlab-wordmark', svgstr: jupyterlabWordmarkSvg });
+export const caseSensitiveIcon = new JLIcon({ name: 'ui-components:case-sensitive', svgstr: caseSensitiveSvg });
+export const regexIcon = new JLIcon({ name: 'ui-components:regex', svgstr: regexSvg });
+export const buildIcon = new JLIcon({ name: 'ui-components:build', svgstr: buildSvg });
+export const extensionIcon = new JLIcon({ name: 'ui-components:extension', svgstr: extensionSvg });
+export const paletteIcon = new JLIcon({ name: 'ui-components:palette', svgstr: paletteSvg });
+export const runningIcon = new JLIcon({ name: 'ui-components:running', svgstr: runningSvg });
+export const tabIcon = new JLIcon({ name: 'ui-components:tab', svgstr: tabSvg });
+export const kernelIcon = new JLIcon({ name: 'ui-components:kernel', svgstr: kernelSvg });
+export const lineFormIcon = new JLIcon({ name: 'ui-components:line-form', svgstr: lineFormSvg });
+export const listIcon = new JLIcon({ name: 'ui-components:list', svgstr: listSvg });
+export const notTrustedIcon = new JLIcon({ name: 'ui-components:not-trusted', svgstr: notTrustedSvg });
+export const terminalIcon = new JLIcon({ name: 'ui-components:terminal', svgstr: terminalSvg });
+export const trustedIcon = new JLIcon({ name: 'ui-components:trusted', svgstr: trustedSvg });
+export const addIcon = new JLIcon({ name: 'ui-components:add', svgstr: addSvg });
+export const bugIcon = new JLIcon({ name: 'ui-components:bug', svgstr: bugSvg });
+export const checkIcon = new JLIcon({ name: 'ui-components:check', svgstr: checkSvg });
+export const circleEmptyIcon = new JLIcon({ name: 'ui-components:circle-empty', svgstr: circleEmptySvg });
+export const circleIcon = new JLIcon({ name: 'ui-components:circle', svgstr: circleSvg });
+export const closeIcon = new JLIcon({ name: 'ui-components:close', svgstr: closeSvg });
+export const copyIcon = new JLIcon({ name: 'ui-components:copy', svgstr: copySvg });
+export const cutIcon = new JLIcon({ name: 'ui-components:cut', svgstr: cutSvg });
+export const downloadIcon = new JLIcon({ name: 'ui-components:download', svgstr: downloadSvg });
+export const editIcon = new JLIcon({ name: 'ui-components:edit', svgstr: editSvg });
+export const ellipsesIcon = new JLIcon({ name: 'ui-components:ellipses', svgstr: ellipsesSvg });
+export const fileUploadIcon = new JLIcon({ name: 'ui-components:file-upload', svgstr: fileUploadSvg });
+export const filterListIcon = new JLIcon({ name: 'ui-components:filter-list', svgstr: filterListSvg });
+export const linkIcon = new JLIcon({ name: 'ui-components:link', svgstr: linkSvg });
+export const newFolderIcon = new JLIcon({ name: 'ui-components:new-folder', svgstr: newFolderSvg });
+export const pasteIcon = new JLIcon({ name: 'ui-components:paste', svgstr: pasteSvg });
+export const refreshIcon = new JLIcon({ name: 'ui-components:refresh', svgstr: refreshSvg });
+export const runIcon = new JLIcon({ name: 'ui-components:run', svgstr: runSvg });
+export const saveIcon = new JLIcon({ name: 'ui-components:save', svgstr: saveSvg });
+export const searchIcon = new JLIcon({ name: 'ui-components:search', svgstr: searchSvg });
+export const stopIcon = new JLIcon({ name: 'ui-components:stop', svgstr: stopSvg });
+export const undoIcon = new JLIcon({ name: 'ui-components:undo', svgstr: undoSvg });

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

@@ -13,8 +13,9 @@ import badSvg from '../../style/debug/bad.svg';
 import blankSvg from '../../style/debug/blank.svg';
 
 export class JLIcon implements JLIcon.IJLIcon {
-  private static _debug: boolean = false;
-  private static _instances = new Map<string, JLIcon>();
+  /***********
+   * statics *
+   ***********/
 
   /**
    * Get any existing JLIcon instance by name.
@@ -133,6 +134,13 @@ export class JLIcon implements JLIcon.IJLIcon {
     JLIcon._debug = debug ?? !JLIcon._debug;
   }
 
+  private static _debug: boolean = false;
+  private static _instances = new Map<string, JLIcon>();
+
+  /***********
+   * members *
+   ***********/
+
   constructor({ name, svgstr }: JLIcon.IJLIcon) {
     this.name = name;
     this._className = Private.nameToClassName(name);
@@ -420,8 +428,13 @@ export namespace JLIcon {
 }
 
 namespace Private {
+  /**
+   * @param name - icon name. May be namespaced as per `some-pkg:foo-bar`
+   *
+   * @returns given a name of `some-pkg:foo-bar`, returns `jp-FooBarIcon`
+   */
   export function nameToClassName(name: string): string {
-    return 'jp-' + Text.camelCase(name, true) + 'Icon';
+    return 'jp-' + Text.camelCase(name.split(':').pop()!, true) + 'Icon';
   }
 
   export function setTitleSvg(svgNode: HTMLElement, title: string): void {

packages/vega5-extension/src/index.ts

@@ -174,19 +174,19 @@ const extension: IRenderMime.IExtension = {
       mimeTypes: [VEGA_MIME_TYPE],
       name: 'vega5',
       extensions: ['.vg', '.vg.json', '.vega'],
-      iconClass: 'vega'
+      iconClass: 'ui-components:vega'
     },
     {
       mimeTypes: [VEGALITE4_MIME_TYPE],
       name: 'vega-lite4',
       extensions: ['.vl', '.vl.json', '.vegalite'],
-      iconClass: 'vega'
+      iconClass: 'ui-components:vega'
     },
     {
       mimeTypes: [VEGALITE3_MIME_TYPE],
       name: 'vega-lite3',
       extensions: [],
-      iconClass: 'vega'
+      iconClass: 'ui-components:vega'
     }
   ]
 };