migrated all jupyter icon and most arrow icon usages to JLIcon

packages/application/style/base.css

@@ -46,7 +46,6 @@ body {
 /* Sibling imports */
 @import './datagrid.css';
 @import './dockpanel.css';
-@import './images.css';
 @import './icons.css';
 @import './menus.css';
 @import './scrollbar.css';

packages/application/style/icons.css

@@ -310,15 +310,6 @@
   vertical-align: sub;
 }
 
-.jp-JupyterIcon {
-  background-image: var(--jp-image-jupyter);
-  background-size: 16px;
-  margin: 2px;
-  margin-left: 8px;
-  margin-right: 0px;
-  padding-right: 0px;
-}
-
 .jp-KeyboardIcon {
   background-image: var(--jp-icon-keyboard);
 }
@@ -337,13 +328,6 @@
   width: 22px;
 }
 
-.jp-MainAreaPortraitIcon {
-  background-position: 0 2px;
-  background-repeat: no-repeat;
-  margin-right: 2px;
-  width: 20px;
-}
-
 .jp-MoreHorizIcon {
   background-image: var(--jp-icon-more);
 }

packages/application/style/images.css

@@ -1,23 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-/* CSS for specific icons */
-
-.jp-ImageJupyterLab {
-  background-image: var(--jp-image-jupyterlab);
-}
-
-.jp-ImageJupyterLab-wordmark {
-  background-image: var(--jp-image-jupyterlab-wordmark);
-}
-
-.jp-JupyterIcon {
-  background-image: var(--jp-image-jupyter);
-  background-size: 16px;
-  margin: 2px;
-  margin-left: 8px;
-  margin-right: 0px;
-  padding-right: 0px;
-}

packages/application/style/scrollbar.css

@@ -152,20 +152,24 @@
 
 .p-ScrollBar[data-orientation='horizontal']
   .p-ScrollBar-button[data-action='decrement'] {
-  background-image: var(--jp-image-caretleft);
+  background-image: var(--jp-icon-caret-left);
+  background-size: 17px;
 }
 
 .p-ScrollBar[data-orientation='horizontal']
   .p-ScrollBar-button[data-action='increment'] {
-  background-image: var(--jp-image-caretright);
+  background-image: var(--jp-icon-caret-right);
+  background-size: 17px;
 }
 
 .p-ScrollBar[data-orientation='vertical']
   .p-ScrollBar-button[data-action='decrement'] {
-  background-image: var(--jp-image-caretup);
+  background-image: var(--jp-icon-caret-up);
+  background-size: 17px;
 }
 
 .p-ScrollBar[data-orientation='vertical']
   .p-ScrollBar-button[data-action='increment'] {
-  background-image: var(--jp-image-caretdown);
+  background-image: var(--jp-icon-caret-down);
+  background-size: 17px;
 }

packages/extensionmanager/src/widget.tsx

@@ -7,7 +7,8 @@ import {
   Button,
   InputGroup,
   Collapse,
-  refreshIcon
+  refreshIcon,
+  jupyterIcon
 } from '@jupyterlab/ui-components';
 
 import { Message } from '@lumino/messaging';
@@ -153,7 +154,12 @@ function ListEntry(props: ListEntry.IProperties): React.ReactElement<any> {
             {entry.name}
           </a>
         </div>
-        <div className="jp-extensionmanager-entry-jupyter-org" />
+        <jupyterIcon.react
+          className="jp-extensionmanager-entry-jupyter-org"
+          top="1px"
+          height="auto"
+          width="1em"
+        />
       </div>
       <div className="jp-extensionmanager-entry-content">
         <div className="jp-extensionmanager-entry-description">

packages/extensionmanager/style/base.css

@@ -141,13 +141,7 @@
 }
 
 .jp-extensionmanager-entry-jupyter-org {
-  background-image: var(--jp-image-jupyter);
-  background-size: 1em;
-  background-repeat: no-repeat;
-  width: 1em;
   display: none;
-  position: relative;
-  top: 1px;
 }
 
 .jp-extensionmanager-entry.jp-extensionmanager-entry-mod-whitelisted

packages/filebrowser/style/base.css

@@ -133,7 +133,6 @@
   height: 16px;
   width: 16px;
   background-size: 18px;
-  background-image: 18px;
   background-repeat: no-repeat;
   background-position: center;
 }

packages/help-extension/package.json

@@ -42,6 +42,7 @@
     "@jupyterlab/inspector": "^2.0.0-alpha.4",
     "@jupyterlab/mainmenu": "^2.0.0-alpha.4",
     "@jupyterlab/services": "^5.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4",
     "@lumino/widgets": "^1.9.4",
     "react": "~16.9.0"
   },

packages/help-extension/src/index.tsx

@@ -24,6 +24,8 @@ import { IMainMenu } from '@jupyterlab/mainmenu';
 
 import { KernelMessage } from '@jupyterlab/services';
 
+import { jupyterIcon, jupyterlabWordmarkIcon } from '@jupyterlab/ui-components';
+
 import { Menu } from '@lumino/widgets';
 
 import * as React from 'react';
@@ -285,8 +287,6 @@ function activate(
     label: `About ${app.name}`,
     execute: () => {
       // Create the header of the about dialog
-      let headerLogo = <div className="jp-About-header-logo" />;
-      let headerWordmark = <div className="jp-About-header-wordmark" />;
       let versionNumber = `Version ${app.version}`;
       let versionInfo = (
         <span className="jp-About-version-info">
@@ -295,9 +295,9 @@ function activate(
       );
       let title = (
         <span className="jp-About-header">
-          {headerLogo}
+          <jupyterIcon.react margin="7px 9.5px" height="auto" width="58px" />
           <div className="jp-About-header-info">
-            {headerWordmark}
+            <jupyterlabWordmarkIcon.react height="auto" width="196px" />
             {versionInfo}
           </div>
         </span>
@@ -329,7 +329,7 @@ function activate(
       );
       let copyright = (
         <span className="jp-About-copyright">
-          © 2015 Project Jupyter Contributors
+          © 2015-2020 Project Jupyter Contributors
         </span>
       );
       let body = (

packages/help-extension/style/base.css

@@ -25,16 +25,6 @@
   overflow: visible;
 }
 
-.jp-Dialog .jp-Dialog-content div.jp-About-header-wordmark {
-  flex: 0 0 auto;
-  height: 44px;
-  width: auto;
-  background-image: var(--jp-about-header-wordmark);
-  background-size: 196px 50px;
-  background-repeat: no-repeat;
-  padding-bottom: 0px;
-}
-
 .jp-About-version-info {
   color: var(--jp-ui-font-color1);
   /* Dialog-header sets the font size to 3, we reset to 1 */
@@ -43,7 +33,6 @@
   font-weight: 400;
   letter-spacing: 0.4px;
   text-align: left;
-  padding-top: 8px;
   line-height: 1.12;
 }
 
@@ -93,12 +82,3 @@
   flex-direction: column;
   margin-left: 16px;
 }
-
-.jp-About-header-logo {
-  height: 94px;
-  width: 77px;
-  background-image: var(--jp-about-header-logo);
-  background-repeat: no-repeat;
-  background-size: 58px auto;
-  background-position: center;
-}

packages/help-extension/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/inspector/style/index.css');
 @import url('~@jupyterlab/mainmenu/style/index.css');

packages/help-extension/tsconfig.json

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

packages/mainmenu-extension/package.json

@@ -41,6 +41,7 @@
     "@jupyterlab/coreutils": "^4.0.0-alpha.4",
     "@jupyterlab/mainmenu": "^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",
     "@lumino/disposable": "^1.3.2",
     "@lumino/widgets": "^1.9.4"

packages/mainmenu-extension/src/index.ts

@@ -33,6 +33,8 @@ import {
 
 import { ServerConnection } from '@jupyterlab/services';
 
+import { jupyterIcon } from '@jupyterlab/ui-components';
+
 /**
  * A namespace for command IDs of semantic extension points.
  */
@@ -129,8 +131,13 @@ const plugin: JupyterFrontEndPlugin<IMainMenu> = {
     menu.id = 'jp-MainMenu';
 
     let logo = new Widget();
-    logo.addClass('jp-MainAreaPortraitIcon');
-    logo.addClass('jp-JupyterIcon');
+    jupyterIcon.element({
+      container: logo.node,
+      justify: 'center',
+      margin: '2px 2px 2px 8px',
+      height: 'auto',
+      width: '16px'
+    });
     logo.id = 'jp-MainLogo';
 
     // Only add quit button if the back-end supports it by checking page config.

packages/mainmenu-extension/tsconfig.json

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

packages/settingeditor/src/settingeditor.tsx

@@ -11,6 +11,8 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
 import { IStateDB } from '@jupyterlab/statedb';
 
+import { jupyterIcon } from '@jupyterlab/ui-components';
+
 import { CommandRegistry } from '@lumino/commands';
 
 import { JSONExt, JSONObject, JSONValue } from '@lumino/coreutils';
@@ -427,12 +429,16 @@ namespace Private {
    * Populate the instructions text node.
    */
   export function populateInstructionsNode(node: HTMLElement): void {
-    const iconClass = `jp-SettingEditorInstructions-icon jp-JupyterIcon`;
-
     ReactDOM.render(
       <React.Fragment>
         <h2>
-          <span className={iconClass} />
+          <jupyterIcon.react
+            className="jp-SettingEditorInstructions-icon"
+            tag="span"
+            justify="center"
+            height="auto"
+            width="60px"
+          />
           <span className="jp-SettingEditorInstructions-title">Settings</span>
         </h2>
         <span className="jp-SettingEditorInstructions-text">

packages/settingeditor/style/base.css

@@ -41,10 +41,9 @@
 
 #setting-editor .jp-SettingEditorInstructions-icon {
   display: inline-block;
-  background-size: 60px;
-  width: 60px;
   height: 78px;
-  margin-right: 5px;
+  margin: 2px 5px 2px 8px;
+  width: 60px;
 }
 
 #setting-editor .jp-SettingEditorInstructions-title {

packages/theme-light-extension/style/urls.css

@@ -3,18 +3,9 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/* TODO: finish cleaning up these cases of icon-as-css-background-image */
 :root {
-  /*--jp-image-jupyter: url('images/jupyter.svg');*/
-  /*--jp-image-jupyterlab: url('images/jupyterlab.svg');*/
-  /*--jp-image-jupyterlab-workmark: url('images/jupyterlab-wordmark.svg');*/
-  /*--jp-about-header-wordmark: url('images/jupyterlab-wordmark.svg');*/
-
-  /*--jp-image-caretleft: url('images/caretleft.png');*/
-  /*--jp-image-caretright: url('images/caretright.png');*/
-  /*--jp-image-caretup: url('images/caretup.png');*/
-  /*--jp-image-caretdown: url('images/caretdown.png');*/
   /*--jp-icon-caretdown: url('icons/md/caretdown.svg');*/
-  /*--jp-icon-caretleft: url('icons/md/caretleft.svg');*/
   /*--jp-icon-caretright: url('icons/md/caretright.svg');*/
   /*--jp-icon-caretup: url('icons/md/caretup.svg');*/
   /*--jp-ui-select-caret: url('icons/md/down_caret.svg');*/
@@ -45,13 +36,11 @@
   /*--jp-icon-search-case-sensitive: url('icons/jupyter/search_case_sensitive.svg');*/
   /*--jp-icon-search-regex: url('icons/jupyter/search_regex.svg');*/
 
-  /*--jp-about-header-logo: url('icons/jupyter/jupyter.svg');*/
   /*--jp-icon-console-selected: url('icons/jupyter/console_selected.svg');*/
   /*--jp-icon-console: url('icons/jupyter/console.svg');*/
   /*--jp-icon-file-upload: url('icons/md/ic_file_upload_24px.svg');*/
   /*--jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg');*/
   /*--jp-icon-home: url('icons/md/ic_home_24px.svg');*/
-  /*--jp-icon-jupyter: url('icons/jupyter/jupyter.svg');*/
   /*--jp-icon-keyboard-selected: url('icons/md/ic_keyboard_24px_selected.svg');*/
   /*--jp-icon-keyboard: url('icons/md/ic_keyboard_24px.svg');*/
   /*--jp-icon-launcher-selected: url('icons/md/ic_launch_24px_selected.svg');*/

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

@@ -36,7 +36,6 @@ import yamlSvg from '../../style/icons/filetype/yaml.svg';
 import jupyterFaviconSvg from '../../style/icons/jupyter/jupyter-favicon.svg';
 import jupyterSvg from '../../style/icons/jupyter/jupyter.svg';
 import jupyterlabWordmarkSvg from '../../style/icons/jupyter/jupyterlab-wordmark.svg';
-import jupyterlabSvg from '../../style/icons/jupyter/jupyterlab.svg';
 import search_arrow_downSvg from '../../style/icons/search/search_arrow_down.svg';
 import search_arrow_upSvg from '../../style/icons/search/search_arrow_up.svg';
 import search_case_sensitiveSvg from '../../style/icons/search/search_case_sensitive.svg';
@@ -106,7 +105,6 @@ export namespace IconImports {
     { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
     { name: 'jupyter', svg: jupyterSvg },
     { name: 'jupyterlab-wordmark', svg: jupyterlabWordmarkSvg },
-    { name: 'jupyterlab', svg: jupyterlabSvg },
     { name: 'search_arrow_down', svg: search_arrow_downSvg },
     { name: 'search_arrow_up', svg: search_arrow_upSvg },
     { name: 'search_case_sensitive', svg: search_case_sensitiveSvg },
@@ -176,7 +174,6 @@ 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 jupyterlabIcon = new JLIcon({ name: 'jupyterlab', svgstr: jupyterlabSvg });
 export const search_arrow_downIcon = new JLIcon({ name: 'search_arrow_down', svgstr: search_arrow_downSvg });
 export const search_arrow_upIcon = new JLIcon({ name: 'search_arrow_up', svgstr: search_arrow_upSvg });
 export const search_case_sensitiveIcon = new JLIcon({ name: 'search_case_sensitive', svgstr: search_case_sensitiveSvg });

packages/ui-components/style/deprecated.css

@@ -39,7 +39,6 @@
   --jp-icon-jupyter-favicon: url('icons/jupyter/jupyter-favicon.svg');
   --jp-icon-jupyter: url('icons/jupyter/jupyter.svg');
   --jp-icon-jupyterlab-wordmark: url('icons/jupyter/jupyterlab-wordmark.svg');
-  --jp-icon-jupyterlab: url('icons/jupyter/jupyterlab.svg');
   --jp-icon-search_arrow_down: url('icons/search/search_arrow_down.svg');
   --jp-icon-search_arrow_up: url('icons/search/search_arrow_up.svg');
   --jp-icon-search_case_sensitive: url('icons/search/search_case_sensitive.svg');
@@ -163,9 +162,6 @@
 .jp-JupyterlabWordmarkIcon {
   background-image: var(--jp-icon-jupyterlab-wordmark);
 }
-.jp-JupyterlabIcon {
-  background-image: var(--jp-icon-jupyterlab);
-}
 .jp-Search_arrow_downIcon {
   background-image: var(--jp-icon-search_arrow_down);
 }

packages/ui-components/style/icons/arrow/caret-down-empty.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-  <g class="jp-icon3" fill="#616161">
+  <g class="jp-icon3" fill="#616161" shape-rendering="geometricPrecision">
     <path d="M5.2,5.9L9,9.7l3.8-3.8l1.2,1.2l-4.9,5l-4.9-5L5.2,5.9z"/>
   </g>
 </svg>

packages/ui-components/style/icons/arrow/caret-down.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-  <g class="jp-icon3" fill="#616161">
+  <g class="jp-icon3" fill="#616161" shape-rendering="geometricPrecision">
     <path d="M5.2,7.5L9,11.2l3.8-3.8H5.2z"/>
   </g>
 </svg>

packages/ui-components/style/icons/arrow/caret-left.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-	<g class="jp-icon3" fill="#616161">
+	<g class="jp-icon3" fill="#616161" shape-rendering="geometricPrecision">
 		<path d="M10.8,12.8L7.1,9l3.8-3.8l0,7.6H10.8z"/>
   </g>
 </svg>

packages/ui-components/style/icons/arrow/caret-right.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-  <g class="jp-icon3" fill="#616161">
+  <g class="jp-icon3" fill="#616161" shape-rendering="geometricPrecision">
     <path d="M7.2,5.2L10.9,9l-3.8,3.8V5.2H7.2z"/>
   </g>
 </svg>

packages/ui-components/style/icons/arrow/caret-up.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-	<g class="jp-icon3" fill="#616161">
+	<g class="jp-icon3" fill="#616161" shape-rendering="geometricPrecision">
 		<path d="M5.2,10.5L9,6.8l3.8,3.8H5.2z"/>
   </g>
 </svg>

packages/ui-components/style/icons/jupyter/jupyterlab-wordmark.svg

@@ -1,93 +1,43 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1860.8 475" style="enable-background:new 0 0 1860.8 475;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#4E4E4E;}
-	.st1{fill:#F37726;}
-</style>
-<title>fulllogo-greytext-orangebody-greymoons (1)</title>
-<desc>Created with Sketch.</desc>
-<g id="Canvas">
-	<g id="logo">
-		<g id="Group" transform="translate(480.136401, 64.271493)">
-			<g id="g">
-				<g id="path" transform="translate(0.000000, 58.875566)">
-					<g id="path0-fill">
-						<g id="path0_fill-link" transform="translate(0.087603, 0.140294)">
-							<path id="path0_fill" class="st0" d="M-426.9,169.8c0,48.7-3.7,64.7-13.6,76.4c-10.8,10-25,15.5-39.7,15.5l3.7,29
-								c22.8,0.3,44.8-7.9,61.9-23.1c17.8-18.5,24-44.1,24-83.3V0H-427v170.1L-426.9,169.8L-426.9,169.8z"/>
-						</g>
-					</g>
-				</g>
-				<g id="path_1_" transform="translate(155.045296, 56.837104)">
-					<g id="path1-fill">
-						<g id="path1_fill-link" transform="translate(1.562453, 1.799842)">
-							<path id="path1_fill" class="st0" d="M-312,148c0,21,0,39.5,1.7,55.4h-31.8l-2.1-33.3h-0.8c-6.7,11.6-16.4,21.3-28,27.9
-								c-11.6,6.6-24.8,10-38.2,9.8c-31.4,0-69-17.7-69-89V0h36.4v112.7c0,38.7,11.6,64.7,44.6,64.7c10.3-0.2,20.4-3.5,28.9-9.4
-								c8.5-5.9,15.1-14.3,18.9-23.9c2.2-6.1,3.3-12.5,3.3-18.9V0.2h36.4V148H-312L-312,148z"/>
-						</g>
-					</g>
-				</g>
-				<g id="path_2_" transform="translate(390.013322, 53.479638)">
-					<g id="path2-fill">
-						<g id="path2_fill-link" transform="translate(1.706458, 0.231425)">
-							<path id="path2_fill" class="st0" d="M-478.6,71.4c0-26-0.8-47-1.7-66.7h32.7l1.7,34.8h0.8c7.1-12.5,17.5-22.8,30.1-29.7
-								c12.5-7,26.7-10.3,41-9.8c48.3,0,84.7,41.7,84.7,103.3c0,73.1-43.7,109.2-91,109.2c-12.1,0.5-24.2-2.2-35-7.8
-								c-10.8-5.6-19.9-13.9-26.6-24.2h-0.8V291h-36v-220L-478.6,71.4L-478.6,71.4z M-442.6,125.6c0.1,5.1,0.6,10.1,1.7,15.1
-								c3,12.3,9.9,23.3,19.8,31.1c9.9,7.8,22.1,12.1,34.7,12.1c38.5,0,60.7-31.9,60.7-78.5c0-40.7-21.1-75.6-59.5-75.6
-								c-12.9,0.4-25.3,5.1-35.3,13.4c-9.9,8.3-16.9,19.7-19.6,32.4c-1.5,4.9-2.3,10-2.5,15.1V125.6L-442.6,125.6L-442.6,125.6z"/>
-						</g>
-					</g>
-				</g>
-				<g id="path_3_" transform="translate(606.740726, 56.837104)">
-					<g id="path3-fill">
-						<g id="path3_fill-link" transform="translate(0.751226, 1.989299)">
-							<path id="path3_fill" class="st0" d="M-440.8,0l43.7,120.1c4.5,13.4,9.5,29.4,12.8,41.7h0.8c3.7-12.2,7.9-27.7,12.8-42.4
-								l39.7-119.2h38.5L-346.9,145c-26,69.7-43.7,105.4-68.6,127.2c-12.5,11.7-27.9,20-44.6,23.9l-9.1-31.1
-								c11.7-3.9,22.5-10.1,31.8-18.1c13.2-11.1,23.7-25.2,30.6-41.2c1.5-2.8,2.5-5.7,2.9-8.8c-0.3-3.3-1.2-6.6-2.5-9.7L-480.2,0.1
-								h39.7L-440.8,0L-440.8,0z"/>
-						</g>
-					</g>
-				</g>
-				<g id="path_4_" transform="translate(822.748104, 0.000000)">
-					<g id="path4-fill">
-						<g id="path4_fill-link" transform="translate(1.464050, 0.378914)">
-							<path id="path4_fill" class="st0" d="M-413.7,0v58.3h52v28.2h-52V196c0,25,7,39.5,27.3,39.5c7.1,0.1,14.2-0.7,21.1-2.5
-								l1.7,27.7c-10.3,3.7-21.3,5.4-32.2,5c-7.3,0.4-14.6-0.7-21.3-3.4c-6.8-2.7-12.9-6.8-17.9-12.1c-10.3-10.9-14.1-29-14.1-52.9
-								V86.5h-31V58.3h31V9.6L-413.7,0L-413.7,0z"/>
-						</g>
-					</g>
-				</g>
-				<g id="path_5_" transform="translate(974.433286, 53.479638)">
-					<g id="path5-fill">
-						<g id="path5_fill-link" transform="translate(0.990034, 0.610339)">
-							<path id="path5_fill" class="st0" d="M-445.8,113c0.8,50,32.2,70.6,68.6,70.6c19,0.6,37.9-3,55.3-10.5l6.2,26.4
-								c-20.9,8.9-43.5,13.1-66.2,12.6c-61.5,0-98.3-41.2-98.3-102.5C-480.2,48.2-444.7,0-386.5,0c65.2,0,82.7,58.3,82.7,95.7
-								c-0.1,5.8-0.5,11.5-1.2,17.2h-140.6H-445.8L-445.8,113z M-339.2,86.6c0.4-23.5-9.5-60.1-50.4-60.1
-								c-36.8,0-52.8,34.4-55.7,60.1H-339.2L-339.2,86.6L-339.2,86.6z"/>
-						</g>
-					</g>
-				</g>
-				<g id="path_6_" transform="translate(1201.961058, 53.479638)">
-					<g id="path6-fill">
-						<g id="path6_fill-link" transform="translate(1.179640, 0.705068)">
-							<path id="path6_fill" class="st0" d="M-478.6,68c0-23.9-0.4-44.5-1.7-63.4h31.8l1.2,39.9h1.7c9.1-27.3,31-44.5,55.3-44.5
-								c3.5-0.1,7,0.4,10.3,1.2v34.8c-4.1-0.9-8.2-1.3-12.4-1.2c-25.6,0-43.7,19.7-48.7,47.4c-1,5.7-1.6,11.5-1.7,17.2v108.3h-36V68
-								L-478.6,68z"/>
-						</g>
-					</g>
-				</g>
-			</g>
-		</g>
-	</g>
-</g>
-<path id="jupyterlab" class="st1" d="M1352.3,326.2h37V28h-37V326.2z M1604.8,326.2c-2.5-13.9-3.4-31.1-3.4-48.7v-76
-	c0-40.7-15.1-83.1-77.3-83.1c-25.6,0-50,7.1-66.8,18.1l8.4,24.4c14.3-9.2,34-15.1,53-15.1c41.6,0,46.2,30.2,46.2,47v4.2
-	c-78.6-0.4-122.3,26.5-122.3,75.6c0,29.4,21,58.4,62.2,58.4c29,0,50.9-14.3,62.2-30.2h1.3l2.9,25.6H1604.8z M1565.7,257.7
-	c0,3.8-0.8,8-2.1,11.8c-5.9,17.2-22.7,34-49.2,34c-18.9,0-34.9-11.3-34.9-35.3c0-39.5,45.8-46.6,86.2-45.8V257.7z M1698.5,326.2
-	l1.7-33.6h1.3c15.1,26.9,38.7,38.2,68.1,38.2c45.4,0,91.2-36.1,91.2-108.8c0.4-61.7-35.3-103.7-85.7-103.7
-	c-32.8,0-56.3,14.7-69.3,37.4h-0.8V28h-36.6v245.7c0,18.1-0.8,38.6-1.7,52.5H1698.5z M1704.8,208.2c0-5.9,1.3-10.9,2.1-15.1
-	c7.6-28.1,31.1-45.4,56.3-45.4c39.5,0,60.5,34.9,60.5,75.6c0,46.6-23.1,78.1-61.8,78.1c-26.9,0-48.3-17.6-55.5-43.3
-	c-0.8-4.2-1.7-8.8-1.7-13.4V208.2z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1860.8 475">
+  <g class="jp-icon2" fill="#4E4E4E" transform="translate(480.136401, 64.271493)">
+    <g transform="translate(0.000000, 58.875566)">
+      <g transform="translate(0.087603, 0.140294)">
+        <path d="M-426.9,169.8c0,48.7-3.7,64.7-13.6,76.4c-10.8,10-25,15.5-39.7,15.5l3.7,29 c22.8,0.3,44.8-7.9,61.9-23.1c17.8-18.5,24-44.1,24-83.3V0H-427v170.1L-426.9,169.8L-426.9,169.8z"/>
+      </g>
+    </g>
+    <g transform="translate(155.045296, 56.837104)">
+      <g transform="translate(1.562453, 1.799842)">
+        <path d="M-312,148c0,21,0,39.5,1.7,55.4h-31.8l-2.1-33.3h-0.8c-6.7,11.6-16.4,21.3-28,27.9 c-11.6,6.6-24.8,10-38.2,9.8c-31.4,0-69-17.7-69-89V0h36.4v112.7c0,38.7,11.6,64.7,44.6,64.7c10.3-0.2,20.4-3.5,28.9-9.4 c8.5-5.9,15.1-14.3,18.9-23.9c2.2-6.1,3.3-12.5,3.3-18.9V0.2h36.4V148H-312L-312,148z"/>
+      </g>
+    </g>
+    <g transform="translate(390.013322, 53.479638)">
+      <g transform="translate(1.706458, 0.231425)">
+        <path d="M-478.6,71.4c0-26-0.8-47-1.7-66.7h32.7l1.7,34.8h0.8c7.1-12.5,17.5-22.8,30.1-29.7 c12.5-7,26.7-10.3,41-9.8c48.3,0,84.7,41.7,84.7,103.3c0,73.1-43.7,109.2-91,109.2c-12.1,0.5-24.2-2.2-35-7.8 c-10.8-5.6-19.9-13.9-26.6-24.2h-0.8V291h-36v-220L-478.6,71.4L-478.6,71.4z M-442.6,125.6c0.1,5.1,0.6,10.1,1.7,15.1 c3,12.3,9.9,23.3,19.8,31.1c9.9,7.8,22.1,12.1,34.7,12.1c38.5,0,60.7-31.9,60.7-78.5c0-40.7-21.1-75.6-59.5-75.6 c-12.9,0.4-25.3,5.1-35.3,13.4c-9.9,8.3-16.9,19.7-19.6,32.4c-1.5,4.9-2.3,10-2.5,15.1V125.6L-442.6,125.6L-442.6,125.6z"/>
+      </g>
+    </g>
+    <g transform="translate(606.740726, 56.837104)">
+      <g transform="translate(0.751226, 1.989299)">
+        <path d="M-440.8,0l43.7,120.1c4.5,13.4,9.5,29.4,12.8,41.7h0.8c3.7-12.2,7.9-27.7,12.8-42.4 l39.7-119.2h38.5L-346.9,145c-26,69.7-43.7,105.4-68.6,127.2c-12.5,11.7-27.9,20-44.6,23.9l-9.1-31.1 c11.7-3.9,22.5-10.1,31.8-18.1c13.2-11.1,23.7-25.2,30.6-41.2c1.5-2.8,2.5-5.7,2.9-8.8c-0.3-3.3-1.2-6.6-2.5-9.7L-480.2,0.1 h39.7L-440.8,0L-440.8,0z"/>
+      </g>
+    </g>
+    <g transform="translate(822.748104, 0.000000)">
+      <g transform="translate(1.464050, 0.378914)">
+        <path d="M-413.7,0v58.3h52v28.2h-52V196c0,25,7,39.5,27.3,39.5c7.1,0.1,14.2-0.7,21.1-2.5 l1.7,27.7c-10.3,3.7-21.3,5.4-32.2,5c-7.3,0.4-14.6-0.7-21.3-3.4c-6.8-2.7-12.9-6.8-17.9-12.1c-10.3-10.9-14.1-29-14.1-52.9 V86.5h-31V58.3h31V9.6L-413.7,0L-413.7,0z"/>
+      </g>
+    </g>
+    <g transform="translate(974.433286, 53.479638)">
+      <g transform="translate(0.990034, 0.610339)">
+        <path d="M-445.8,113c0.8,50,32.2,70.6,68.6,70.6c19,0.6,37.9-3,55.3-10.5l6.2,26.4 c-20.9,8.9-43.5,13.1-66.2,12.6c-61.5,0-98.3-41.2-98.3-102.5C-480.2,48.2-444.7,0-386.5,0c65.2,0,82.7,58.3,82.7,95.7 c-0.1,5.8-0.5,11.5-1.2,17.2h-140.6H-445.8L-445.8,113z M-339.2,86.6c0.4-23.5-9.5-60.1-50.4-60.1 c-36.8,0-52.8,34.4-55.7,60.1H-339.2L-339.2,86.6L-339.2,86.6z"/>
+      </g>
+    </g>
+    <g transform="translate(1201.961058, 53.479638)">
+      <g transform="translate(1.179640, 0.705068)">
+        <path d="M-478.6,68c0-23.9-0.4-44.5-1.7-63.4h31.8l1.2,39.9h1.7c9.1-27.3,31-44.5,55.3-44.5 c3.5-0.1,7,0.4,10.3,1.2v34.8c-4.1-0.9-8.2-1.3-12.4-1.2c-25.6,0-43.7,19.7-48.7,47.4c-1,5.7-1.6,11.5-1.7,17.2v108.3h-36V68 L-478.6,68z"/>
+      </g>
+    </g>
+  </g>
+
+  <g class="jp-icon-warn0" fill="#F37726">
+    <path d="M1352.3,326.2h37V28h-37V326.2z M1604.8,326.2c-2.5-13.9-3.4-31.1-3.4-48.7v-76 c0-40.7-15.1-83.1-77.3-83.1c-25.6,0-50,7.1-66.8,18.1l8.4,24.4c14.3-9.2,34-15.1,53-15.1c41.6,0,46.2,30.2,46.2,47v4.2 c-78.6-0.4-122.3,26.5-122.3,75.6c0,29.4,21,58.4,62.2,58.4c29,0,50.9-14.3,62.2-30.2h1.3l2.9,25.6H1604.8z M1565.7,257.7 c0,3.8-0.8,8-2.1,11.8c-5.9,17.2-22.7,34-49.2,34c-18.9,0-34.9-11.3-34.9-35.3c0-39.5,45.8-46.6,86.2-45.8V257.7z M1698.5,326.2 l1.7-33.6h1.3c15.1,26.9,38.7,38.2,68.1,38.2c45.4,0,91.2-36.1,91.2-108.8c0.4-61.7-35.3-103.7-85.7-103.7 c-32.8,0-56.3,14.7-69.3,37.4h-0.8V28h-36.6v245.7c0,18.1-0.8,38.6-1.7,52.5H1698.5z M1704.8,208.2c0-5.9,1.3-10.9,2.1-15.1 c7.6-28.1,31.1-45.4,56.3-45.4c39.5,0,60.5,34.9,60.5,75.6c0,46.6-23.1,78.1-61.8,78.1c-26.9,0-48.3-17.6-55.5-43.3 c-0.8-4.2-1.7-8.8-1.7-13.4V208.2z"/>
+  </g>
 </svg>