simplified JLIcon styling for lumino; moved all tab icons to JLIcon

All filetype icons in tabs and all extension icons in the sidebar are now JLIcons

packages/application/package.json

@@ -42,6 +42,7 @@
     "@jupyterlab/rendermime-interfaces": "^2.0.0-alpha.4",
     "@jupyterlab/services": "^5.0.0-alpha.4",
     "@jupyterlab/statedb": "^2.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4",
     "@lumino/algorithm": "^1.2.1",
     "@lumino/application": "^1.7.4",
     "@lumino/commands": "^1.9.0",

packages/application/src/shell.ts

@@ -3,6 +3,8 @@
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
+import { JLIcon } from '@jupyterlab/ui-components';
+
 import { ArrayExt, find, IIterator, iter, toArray } from '@lumino/algorithm';
 
 import { PromiseDelegate, Token } from '@lumino/coreutils';
@@ -765,9 +767,19 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
       ref = find(dock.widgets(), value => value.id === options!.ref!) || null;
     }
 
+    const { title } = widget;
     // Add widget ID to tab so that we can get a handle on the tab's widget
     // (for context menu support)
-    widget.title.dataset = { ...widget.title.dataset, id: widget.id };
+    title.dataset = { ...title.dataset, id: widget.id };
+
+    // set an appropriate style class for the iconRenderer
+    if (title.iconRenderer instanceof JLIcon) {
+      title.iconClass = title.iconRenderer.class({
+        className: title.iconClass,
+        center: true,
+        kind: 'mainAreaTab'
+      });
+    }
 
     dock.addWidget(widget, { mode, ref });
 
@@ -1171,6 +1183,16 @@ namespace Private {
       // Store the parent id in the title dataset
       // in order to dispatch click events to the right widget.
       title.dataset = { id: widget.id };
+
+      // set an appropriate style class for the iconRenderer
+      if (title.iconRenderer instanceof JLIcon) {
+        title.iconClass = title.iconRenderer.class({
+          className: title.iconClass,
+          center: true,
+          kind: 'sideBar'
+        });
+      }
+
       this._refreshVisibility();
     }
 

packages/application/style/index.css

@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@lumino/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');
 @import url('~font-awesome/css/font-awesome.min.css');

packages/application/tsconfig.json

@@ -26,6 +26,9 @@
     },
     {
       "path": "../statedb"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/apputils-extension/src/palette.ts

@@ -4,15 +4,13 @@
 |----------------------------------------------------------------------------*/
 
 import { find } from '@lumino/algorithm';
-
 import { CommandRegistry } from '@lumino/commands';
 import { DisposableDelegate, IDisposable } from '@lumino/disposable';
-
 import { CommandPalette } from '@lumino/widgets';
 
 import { ILayoutRestorer, JupyterFrontEnd } from '@jupyterlab/application';
-
 import { ICommandPalette, IPaletteItem } from '@jupyterlab/apputils';
+import { paletteIcon } from '@jupyterlab/ui-components';
 
 /**
  * The command IDs used by the apputils extension.
@@ -31,7 +29,7 @@ export class Palette implements ICommandPalette {
    */
   constructor(palette: CommandPalette) {
     this._palette = palette;
-    this._palette.title.iconClass = 'jp-PaletteIcon jp-SideBar-tabIcon';
+    this._palette.title.iconRenderer = paletteIcon;
     this._palette.title.label = '';
     this._palette.title.caption = 'Command Palette';
   }
@@ -145,6 +143,7 @@ namespace Private {
     if (!palette) {
       palette = new CommandPalette({ commands: app.commands });
       palette.id = 'command-palette';
+      palette.title.iconRenderer = paletteIcon;
       palette.title.label = 'Commands';
     }
 

packages/docregistry/src/registry.ts

@@ -66,7 +66,10 @@ export class DocumentRegistry implements IDisposable {
 
     let fts = options.initialFileTypes || DocumentRegistry.defaultFileTypes;
     fts.forEach(ft => {
-      let value = new DocumentRegistry.FileType(ft);
+      let value: DocumentRegistry.IFileType = {
+        ...DocumentRegistry.fileTypeDefaults,
+        ...ft
+      };
       this._fileTypes.push(value);
     });
   }
@@ -1208,34 +1211,6 @@ export namespace DocumentRegistry {
     fileFormat: 'text'
   };
 
-  /**
-   * A wrapper for IFileTypes
-   */
-  export class FileType implements IFileType {
-    constructor(options: Partial<IFileType>) {
-      Object.assign(this, fileTypeDefaults, options);
-
-      if (!this.iconClass && this.iconRenderer) {
-        // set a default style class for icons
-        this.iconClass = this.iconRenderer.style({
-          kind: 'mainAreaTab',
-          center: true
-        });
-      }
-    }
-
-    readonly name: string;
-    readonly mimeTypes: ReadonlyArray<string>;
-    readonly extensions: ReadonlyArray<string>;
-    readonly displayName: string;
-    readonly pattern: string;
-    readonly iconClass: string;
-    readonly iconLabel: string;
-    readonly iconRenderer: JLIcon;
-    readonly contentType: Contents.ContentType;
-    readonly fileFormat: Contents.FileFormat;
-  }
-
   /**
    * An arguments object for the `changed` signal.
    */

packages/extensionmanager-extension/package.json

@@ -40,7 +40,8 @@
     "@jupyterlab/apputils": "^2.0.0-alpha.4",
     "@jupyterlab/extensionmanager": "^2.0.0-alpha.4",
     "@jupyterlab/mainmenu": "^2.0.0-alpha.4",
-    "@jupyterlab/settingregistry": "^2.0.0-alpha.4"
+    "@jupyterlab/settingregistry": "^2.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4"
   },
   "devDependencies": {
     "rimraf": "~3.0.0",

packages/extensionmanager-extension/src/index.ts

@@ -7,14 +7,12 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-
 import { Dialog, showDialog, ICommandPalette } from '@jupyterlab/apputils';
-
-import { IMainMenu } from '@jupyterlab/mainmenu';
-
 import { ExtensionView } from '@jupyterlab/extensionmanager';
-
+import { IMainMenu } from '@jupyterlab/mainmenu';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { extensionIcon } from '@jupyterlab/ui-components';
+
 
 /**
  * IDs of the commands added by this extension.
@@ -48,7 +46,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
     const createView = () => {
       const v = new ExtensionView(serviceManager);
       v.id = 'extensionmanager.main-view';
-      v.title.iconClass = 'jp-ExtensionIcon jp-SideBar-tabIcon';
+      v.title.iconRenderer = extensionIcon;
       v.title.caption = 'Extension Manager';
       if (restorer) {
         restorer.add(v, v.id);

packages/extensionmanager-extension/tsconfig.json

@@ -20,6 +20,9 @@
     },
     {
       "path": "../settingregistry"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/filebrowser-extension/src/index.ts

@@ -42,7 +42,7 @@ import { IStateDB } from '@jupyterlab/statedb';
 
 import { IStatusBar } from '@jupyterlab/statusbar';
 
-import { IIconRegistry } from '@jupyterlab/ui-components';
+import { folderIcon, IIconRegistry } from '@jupyterlab/ui-components';
 
 import { IIterator, map, reduce, toArray } from '@lumino/algorithm';
 
@@ -295,7 +295,7 @@ function activateBrowser(
     mainMenu
   );
 
-  browser.title.iconClass = 'jp-FolderIcon jp-SideBar-tabIcon';
+  browser.title.iconRenderer = folderIcon;
   browser.title.caption = 'File Browser';
   labShell.add(browser, 'left', { rank: 100 });
 

packages/fileeditor/src/widget.ts

@@ -326,10 +326,6 @@ export class FileEditorFactory extends ABCWidgetFactory<
       mimeTypeService: this._services.mimeTypeService
     });
 
-    content.title.iconClass = textEditorIcon.style({
-      kind: 'mainAreaTab',
-      center: true
-    });
     content.title.iconRenderer = textEditorIcon;
 
     const widget = new DocumentWidget({ content, context });

packages/htmlviewer-extension/src/index.tsx

@@ -19,10 +19,7 @@ import {
   IHTMLViewerTracker
 } from '@jupyterlab/htmlviewer';
 
-/**
- * The name for an HTML5 icon.
- */
-const ICON_NAME = 'html5';
+import { html5Icon } from '@jupyterlab/ui-components';
 
 /**
  * Command IDs used by the plugin.
@@ -58,7 +55,7 @@ function activateHTMLViewer(
     displayName: 'HTML File',
     extensions: ['.html'],
     mimeTypes: ['text/html'],
-    iconClass: ICON_NAME
+    iconRenderer: html5Icon
   };
   app.docRegistry.addFileType(ft);
 
@@ -98,9 +95,9 @@ function activateHTMLViewer(
       app.commands.notifyCommandChanged(CommandIDs.trustHTML);
     });
 
-    // widget.node.appendChild(HTML5Icon);
     widget.title.iconClass = ft.iconClass ?? '';
     widget.title.iconLabel = ft.iconLabel ?? '';
+    widget.title.iconRenderer = ft.iconRenderer;
   });
 
   // Add a command to trust the active HTML document,

packages/logconsole-extension/src/index.tsx

@@ -35,7 +35,7 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
 import { IStatusBar } from '@jupyterlab/statusbar';
 
-import { HTMLSelect } from '@jupyterlab/ui-components';
+import { HTMLSelect, listIcon } from '@jupyterlab/ui-components';
 
 import { UUID } from '@lumino/coreutils';
 
@@ -145,7 +145,7 @@ function activateLogConsole(
     logConsoleWidget.addClass('jp-LogConsole');
     logConsoleWidget.title.closable = true;
     logConsoleWidget.title.label = 'Log Console';
-    logConsoleWidget.title.iconClass = 'jp-ListIcon';
+    logConsoleWidget.title.iconRenderer = listIcon;
 
     const addCheckpointButton = new CommandToolbarButton({
       commands: app.commands,

packages/logconsole-extension/src/status.tsx

@@ -11,7 +11,7 @@ import {
 
 import { GroupItem, TextItem, interactiveItem } from '@jupyterlab/statusbar';
 
-import { DefaultIconReact } from '@jupyterlab/ui-components';
+import { listIcon } from '@jupyterlab/ui-components';
 
 import { Signal } from '@lumino/signaling';
 
@@ -32,15 +32,10 @@ function LogConsoleStatusComponent(
     title = `${props.newMessages} new messages, `;
   }
   title += `${props.logEntries} log entries for ${props.source}`;
-  // inline conditional doesn't seem to work with strict TS currently...
-  let cond: JSX.Element = (false as unknown) as JSX.Element;
-  if (props.newMessages > 0) {
-    cond = <TextItem source={props.newMessages} />;
-  }
   return (
     <GroupItem spacing={0} onClick={props.handleClick} title={title}>
-      <DefaultIconReact name={'list'} top={'2px'} kind={'statusBar'} />
-      {cond}
+      <listIcon.react top={'2px'} kind={'statusBar'} />
+      {props.newMessages > 0 ? <TextItem source={props.newMessages} /> : <></>}
     </GroupItem>
   );
 }

packages/notebook-extension/package.json

@@ -53,6 +53,7 @@
     "@jupyterlab/settingregistry": "^2.0.0-alpha.4",
     "@jupyterlab/statedb": "^2.0.0-alpha.4",
     "@jupyterlab/statusbar": "^2.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4",
     "@lumino/algorithm": "^1.2.1",
     "@lumino/commands": "^1.9.0",
     "@lumino/coreutils": "^1.4.0",

packages/notebook-extension/src/index.ts

@@ -26,24 +26,6 @@ import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 
 import { IDocumentManager } from '@jupyterlab/docmanager';
 
-import * as nbformat from '@jupyterlab/nbformat';
-
-import { ISettingRegistry } from '@jupyterlab/settingregistry';
-
-import { IStateDB } from '@jupyterlab/statedb';
-
-import { ArrayExt } from '@lumino/algorithm';
-
-import {
-  UUID,
-  JSONExt,
-  JSONObject,
-  ReadonlyPartialJSONObject,
-  ReadonlyJSONValue
-} from '@lumino/coreutils';
-
-import { DisposableSet } from '@lumino/disposable';
-
 import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 
 import { ILauncher } from '@jupyterlab/launcher';
@@ -58,6 +40,8 @@ import {
   IViewMenu
 } from '@jupyterlab/mainmenu';
 
+import * as nbformat from '@jupyterlab/nbformat';
+
 import {
   NotebookTools,
   INotebookTools,
@@ -78,14 +62,32 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { ServiceManager } from '@jupyterlab/services';
 
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+
+import { IStateDB } from '@jupyterlab/statedb';
+
 import { IStatusBar } from '@jupyterlab/statusbar';
 
-import { JSONValue } from '@lumino/coreutils';
+import { buildIcon } from '@jupyterlab/ui-components';
+
+import { ArrayExt } from '@lumino/algorithm';
+
+import { CommandRegistry } from '@lumino/commands';
+
+import {
+  JSONExt,
+  JSONObject,
+  JSONValue,
+  ReadonlyPartialJSONObject,
+  ReadonlyJSONValue,
+  UUID
+} from '@lumino/coreutils';
+
+import { DisposableSet } from '@lumino/disposable';
 
 import { Message, MessageLoop } from '@lumino/messaging';
 
 import { Panel, Menu } from '@lumino/widgets';
-import { CommandRegistry } from '@lumino/commands';
 
 /**
  * The command IDs used by the notebook plugin.
@@ -462,7 +464,7 @@ function activateNotebookTools(
       notebookTools.addItem({ tool: nbConvert, section: 'common', rank: 3 });
     }
   });
-  notebookTools.title.iconClass = 'jp-BuildIcon jp-SideBar-tabIcon';
+  notebookTools.title.iconRenderer = buildIcon;
   notebookTools.title.caption = 'Notebook Tools';
   notebookTools.id = id;
 

packages/notebook-extension/tsconfig.json

@@ -56,6 +56,9 @@
     },
     {
       "path": "../statusbar"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/running-extension/package.json

@@ -39,6 +39,7 @@
     "@jupyterlab/coreutils": "^4.0.0-alpha.4",
     "@jupyterlab/running": "^2.0.0-alpha.4",
     "@jupyterlab/services": "^5.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4",
     "@lumino/algorithm": "^1.2.1"
   },
   "devDependencies": {

packages/running-extension/src/index.ts

@@ -12,6 +12,7 @@ import {
   RunningSessionManagers,
   RunningSessions
 } from '@jupyterlab/running';
+import { runningIcon } from '@jupyterlab/ui-components';
 
 import { Session } from '@jupyterlab/services';
 import { PathExt } from '@jupyterlab/coreutils';
@@ -58,7 +59,7 @@ function activate(
   let runningSessionManagers = new RunningSessionManagers();
   let running = new RunningSessions(runningSessionManagers);
   running.id = 'jp-running-sessions';
-  running.title.iconClass = 'jp-RunningIcon jp-SideBar-tabIcon';
+  running.title.iconRenderer = runningIcon;
   running.title.caption = 'Running Terminals and Kernels';
 
   // Let the application restorer track the running panel for restoration of

packages/running-extension/tsconfig.json

@@ -17,6 +17,9 @@
     },
     {
       "path": "../services"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/tabmanager-extension/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@jupyterlab/application": "^2.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4",
     "@lumino/algorithm": "^1.2.1",
     "@lumino/widgets": "^1.9.4"
   },

packages/tabmanager-extension/src/index.ts

@@ -1,16 +1,16 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { each } from '@lumino/algorithm';
+import { TabBar, Widget } from '@lumino/widgets';
+
 import {
   ILabShell,
   ILayoutRestorer,
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-
-import { each } from '@lumino/algorithm';
-
-import { TabBar, Widget } from '@lumino/widgets';
+import { tabIcon } from '@jupyterlab/ui-components';
 
 /**
  * The default tab manager extension.
@@ -31,7 +31,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
     }
 
     tabs.id = 'tab-manager';
-    tabs.title.iconClass = 'jp-TabIcon jp-SideBar-tabIcon';
+    tabs.title.iconRenderer = tabIcon;
     tabs.title.caption = 'Open Tabs';
     header.textContent = 'Open Tabs';
     tabs.node.insertBefore(header, tabs.contentNode);

packages/tabmanager-extension/style/index.css

@@ -5,5 +5,6 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@lumino/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 
 @import url('./base.css');

packages/tabmanager-extension/tsconfig.json

@@ -8,6 +8,9 @@
   "references": [
     {
       "path": "../application"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

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

@@ -5,7 +5,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { iconStyle, IIconStyle } from '../style/icon';
-import { getReactAttrs, classes } from '../utils';
+import { getReactAttrs, classes, classesDedupe } from '../utils';
 
 export class JLIcon {
   private static _instances = new Map<string, JLIcon>();
@@ -24,6 +24,10 @@ export class JLIcon {
     JLIcon._instances.set(name, this);
   }
 
+  class({ className, ...propsStyle }: { className?: string } & IIconStyle) {
+    return classesDedupe(className, iconStyle(propsStyle));
+  }
+
   element({
     className,
     container,
@@ -90,10 +94,6 @@ export class JLIcon {
     return this._svgstr;
   }
 
-  style(props?: IIconStyle) {
-    return iconStyle(props);
-  }
-
   unrender(host: HTMLElement): void {
     ReactDOM.unmountComponentAtNode(host);
   }
@@ -109,7 +109,7 @@ export class JLIcon {
     propsStyle?: IIconStyle;
     title?: string;
   }) {
-    const classStyle = this.style(propsStyle);
+    const classStyle = iconStyle(propsStyle);
 
     if (className || className === '') {
       // override the container class with explicitly passed-in class + style class
@@ -159,7 +159,7 @@ export class JLIcon {
           return svgComponent;
         } else {
           return (
-            <Tag className={classes(className, this.style(propsStyle))}>
+            <Tag className={classes(className, iconStyle(propsStyle))}>
               {svgComponent}
             </Tag>
           );
@@ -191,7 +191,6 @@ export namespace JLIcon {
   export interface IOptions {
     name: string;
     svgstr: string;
-    style?: IIconStyle;
     _debug?: boolean;
   }
 

packages/ui-components/style/icons/sidebar/build.svg

@@ -1,6 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g class="jp-icon3" fill="#616161">
-        <path d="M14.9 17.45C16.25 17.45 17.35 16.35 17.35 15C17.35 13.65 16.25 12.55 14.9 12.55C13.54 12.55 12.45 13.65 12.45 15C12.45 16.35 13.54 17.45 14.9 17.45ZM20.1 15.68L21.58 16.84C21.71 16.95 21.75 17.13 21.66 17.29L20.26 19.71C20.17 19.86 20 19.92 19.83 19.86L18.09 19.16C17.73 19.44 17.33 19.67 16.91 19.85L16.64 21.7C16.62 21.87 16.47 22 16.3 22H13.5C13.32 22 13.18 21.87 13.15 21.7L12.89 19.85C12.46 19.67 12.07 19.44 11.71 19.16L9.96002 19.86C9.81002 19.92 9.62002 19.86 9.54002 19.71L8.14002 17.29C8.05002 17.13 8.09002 16.95 8.22002 16.84L9.70002 15.68L9.65001 15L9.70002 14.31L8.22002 13.16C8.09002 13.05 8.05002 12.86 8.14002 12.71L9.54002 10.29C9.62002 10.13 9.81002 10.07 9.96002 10.13L11.71 10.84C12.07 10.56 12.46 10.32 12.89 10.15L13.15 8.28998C13.18 8.12998 13.32 7.99998 13.5 7.99998H16.3C16.47 7.99998 16.62 8.12998 16.64 8.28998L16.91 10.15C17.33 10.32 17.73 10.56 18.09 10.84L19.83 10.13C20 10.07 20.17 10.13 20.26 10.29L21.66 12.71C21.75 12.86 21.71 13.05 21.58 13.16L20.1 14.31L20.15 15L20.1 15.68Z"/>
-        <path d="M7.32966 7.44454C8.0831 7.00954 8.33932 6.05332 7.90432 5.29988C7.46932 4.54643 6.5081 4.28156 5.75466 4.71656C5.39176 4.92608 5.12695 5.27118 5.01849 5.67594C4.91004 6.08071 4.96682 6.51198 5.17634 6.87488C5.61134 7.62832 6.57622 7.87954 7.32966 7.44454ZM9.65718 4.79593L10.8672 4.95179C10.9628 4.97741 11.0402 5.07133 11.0382 5.18793L11.0388 6.98893C11.0455 7.10054 10.9616 7.19518 10.855 7.21054L9.66001 7.38083L9.23915 8.13188L9.66961 9.25745C9.70729 9.36271 9.66934 9.47699 9.57408 9.53199L8.01523 10.432C7.91131 10.492 7.79337 10.4677 7.72105 10.3824L6.98748 9.43188L6.10931 9.43083L5.34704 10.3905C5.28909 10.4702 5.17383 10.4905 5.07187 10.4339L3.51245 9.53293C3.41049 9.47633 3.37647 9.35741 3.41075 9.25679L3.86347 8.14093L3.61749 7.77488L3.42347 7.37883L2.23075 7.21297C2.12647 7.19235 2.04049 7.10342 2.04245 6.98682L2.04187 5.18582C2.04383 5.06922 2.11909 4.97958 2.21704 4.96922L3.42065 4.79393L3.86749 4.02788L3.41105 2.91731C3.37337 2.81204 3.41131 2.69776 3.51523 2.63776L5.07408 1.73776C5.16934 1.68276 5.28729 1.70704 5.35961 1.79231L6.11915 2.72788L6.98001 2.73893L7.72496 1.78922C7.79156 1.70458 7.91548 1.67922 8.00879 1.74082L9.56821 2.64182C9.67017 2.69842 9.71285 2.81234 9.68723 2.90797L9.21718 4.03383L9.46316 4.39988L9.65718 4.79593Z"/>
-    </g>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g class="jp-icon3" fill="#616161">
+    <path d="M14.9 17.45C16.25 17.45 17.35 16.35 17.35 15C17.35 13.65 16.25 12.55 14.9 12.55C13.54 12.55 12.45 13.65 12.45 15C12.45 16.35 13.54 17.45 14.9 17.45ZM20.1 15.68L21.58 16.84C21.71 16.95 21.75 17.13 21.66 17.29L20.26 19.71C20.17 19.86 20 19.92 19.83 19.86L18.09 19.16C17.73 19.44 17.33 19.67 16.91 19.85L16.64 21.7C16.62 21.87 16.47 22 16.3 22H13.5C13.32 22 13.18 21.87 13.15 21.7L12.89 19.85C12.46 19.67 12.07 19.44 11.71 19.16L9.96002 19.86C9.81002 19.92 9.62002 19.86 9.54002 19.71L8.14002 17.29C8.05002 17.13 8.09002 16.95 8.22002 16.84L9.70002 15.68L9.65001 15L9.70002 14.31L8.22002 13.16C8.09002 13.05 8.05002 12.86 8.14002 12.71L9.54002 10.29C9.62002 10.13 9.81002 10.07 9.96002 10.13L11.71 10.84C12.07 10.56 12.46 10.32 12.89 10.15L13.15 8.28998C13.18 8.12998 13.32 7.99998 13.5 7.99998H16.3C16.47 7.99998 16.62 8.12998 16.64 8.28998L16.91 10.15C17.33 10.32 17.73 10.56 18.09 10.84L19.83 10.13C20 10.07 20.17 10.13 20.26 10.29L21.66 12.71C21.75 12.86 21.71 13.05 21.58 13.16L20.1 14.31L20.15 15L20.1 15.68Z"/>
+    <path d="M7.32966 7.44454C8.0831 7.00954 8.33932 6.05332 7.90432 5.29988C7.46932 4.54643 6.5081 4.28156 5.75466 4.71656C5.39176 4.92608 5.12695 5.27118 5.01849 5.67594C4.91004 6.08071 4.96682 6.51198 5.17634 6.87488C5.61134 7.62832 6.57622 7.87954 7.32966 7.44454ZM9.65718 4.79593L10.8672 4.95179C10.9628 4.97741 11.0402 5.07133 11.0382 5.18793L11.0388 6.98893C11.0455 7.10054 10.9616 7.19518 10.855 7.21054L9.66001 7.38083L9.23915 8.13188L9.66961 9.25745C9.70729 9.36271 9.66934 9.47699 9.57408 9.53199L8.01523 10.432C7.91131 10.492 7.79337 10.4677 7.72105 10.3824L6.98748 9.43188L6.10931 9.43083L5.34704 10.3905C5.28909 10.4702 5.17383 10.4905 5.07187 10.4339L3.51245 9.53293C3.41049 9.47633 3.37647 9.35741 3.41075 9.25679L3.86347 8.14093L3.61749 7.77488L3.42347 7.37883L2.23075 7.21297C2.12647 7.19235 2.04049 7.10342 2.04245 6.98682L2.04187 5.18582C2.04383 5.06922 2.11909 4.97958 2.21704 4.96922L3.42065 4.79393L3.86749 4.02788L3.41105 2.91731C3.37337 2.81204 3.41131 2.69776 3.51523 2.63776L5.07408 1.73776C5.16934 1.68276 5.28729 1.70704 5.35961 1.79231L6.11915 2.72788L6.98001 2.73893L7.72496 1.78922C7.79156 1.70458 7.91548 1.67922 8.00879 1.74082L9.56821 2.64182C9.67017 2.69842 9.71285 2.81234 9.68723 2.90797L9.21718 4.03383L9.46316 4.39988L9.65718 4.79593Z"/>
+  </g>
 </svg>

packages/ui-components/style/icons/sidebar/extension.svg

@@ -1,7 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path
-        class="jp-icon3"
-        fill="#616161"
-        d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
-    />
+  <g class="jp-icon3" fill="#616161">
+    <path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/>
+  </g>
 </svg>

packages/ui-components/style/icons/sidebar/palette.svg

@@ -1,7 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24"/>
-<g class="jp-icon3" fill="#616161">
-  <path d="M18 13V20H4V6H9.02C9.07 5.29 9.24 4.62 9.5 4H4C2.9 4 2 4.9 2 6V20C2 21.1 2.9 22 4 22H18C19.1 22 20 21.1 20 20V15L18 13ZM19.3 8.89C19.74 8.19 20 7.38 20 6.5C20 4.01 17.99 2 15.5 2C13.01 2 11 4.01 11 6.5C11 8.99 13.01 11 15.49 11C16.37 11 17.19 10.74 17.88 10.3L21 13.42L22.42 12L19.3 8.89ZM15.5 9C14.12 9 13 7.88 13 6.5C13 5.12 14.12 4 15.5 4C16.88 4 18 5.12 18 6.5C18 7.88 16.88 9 15.5 9Z"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M4 6H9.01894C9.00639 6.16502 9 6.33176 9 6.5C9 8.81577 10.211 10.8487 12.0343 12H9V14H16V12.9811C16.5703 12.9377 17.12 12.8207 17.6396 12.6396L18 13V20H4V6ZM8 8H6V10H8V8ZM6 12H8V14H6V12ZM8 16H6V18H8V16ZM9 16H16V18H9V16Z"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g class="jp-icon3" fill="#616161">
+    <path d="M18 13V20H4V6H9.02C9.07 5.29 9.24 4.62 9.5 4H4C2.9 4 2 4.9 2 6V20C2 21.1 2.9 22 4 22H18C19.1 22 20 21.1 20 20V15L18 13ZM19.3 8.89C19.74 8.19 20 7.38 20 6.5C20 4.01 17.99 2 15.5 2C13.01 2 11 4.01 11 6.5C11 8.99 13.01 11 15.49 11C16.37 11 17.19 10.74 17.88 10.3L21 13.42L22.42 12L19.3 8.89ZM15.5 9C14.12 9 13 7.88 13 6.5C13 5.12 14.12 4 15.5 4C16.88 4 18 5.12 18 6.5C18 7.88 16.88 9 15.5 9Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 6H9.01894C9.00639 6.16502 9 6.33176 9 6.5C9 8.81577 10.211 10.8487 12.0343 12H9V14H16V12.9811C16.5703 12.9377 17.12 12.8207 17.6396 12.6396L18 13V20H4V6ZM8 8H6V10H8V8ZM6 12H8V14H6V12ZM8 16H6V18H8V16ZM9 16H16V18H9V16Z"/>
   </g>
 </svg>

packages/ui-components/style/icons/sidebar/running.svg

@@ -1,7 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="bar">
-    <path
-        class="jp-icon3"
-        fill="#616161"
-        d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z"
-    />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g class="jp-icon3" fill="#616161">
+    <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z"/>
+  </g>
 </svg>

packages/ui-components/style/icons/sidebar/tab.svg

@@ -1,7 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path
-        class="jp-icon3"
-        fill="#616161"
-        d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"
-    />
+  <g class="jp-icon3" fill="#616161">
+    <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"/>
+  </g>
 </svg>