Use svg icons for the main view toolbar

packages/base/src/constants.ts

@@ -1,5 +1,13 @@
 import { LabIcon, redoIcon, undoIcon } from '@jupyterlab/ui-components';
-import { geoJSONIcon, moundIcon, rasterIcon } from './icons';
+import {
+  bookOpenIcon,
+  clockIcon,
+  geoJSONIcon,
+  infoIcon,
+  moundIcon,
+  rasterIcon,
+  vectorSquareIcon
+} from './icons';
 
 /**
  * The command IDs.
@@ -95,18 +103,18 @@ const iconObject = {
 
   [CommandIDs.redo]: { icon: redoIcon },
   [CommandIDs.undo]: { icon: undoIcon },
-  [CommandIDs.openLayerBrowser]: { iconClass: 'fa fa-book-open' },
+  [CommandIDs.openLayerBrowser]: { icon: bookOpenIcon },
   [CommandIDs.newRasterEntry]: { icon: rasterIcon },
-  [CommandIDs.newVectorTileEntry]: { iconClass: 'fa fa-vector-square' },
+  [CommandIDs.newVectorTileEntry]: { icon: vectorSquareIcon },
   [CommandIDs.newGeoJSONEntry]: { icon: geoJSONIcon },
   [CommandIDs.newHillshadeEntry]: { icon: moundIcon },
   [CommandIDs.newImageEntry]: { iconClass: 'fa fa-image' },
   [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
   [CommandIDs.newShapefileLayer]: { iconClass: 'fa fa-file' },
   [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
   [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
-  [CommandIDs.identify]: { iconClass: 'fa fa-info' },
-  [CommandIDs.temporalController]: { iconClass: 'fa fa-clock' }
+  [CommandIDs.identify]: { icon: infoIcon },
+  [CommandIDs.temporalController]: { icon: clockIcon }
 };
 
 /**

packages/base/src/icons.ts

@@ -15,6 +15,11 @@ import nonVisibilitySvgStr from '../style/icons/nonvisibility.svg';
 import geoJsonSvgStr from '../style/icons/geojson.svg';
 import moundSvgStr from '../style/icons/mound.svg';
 import logoMiniQGZ from '../style/icons/logo_mini_qgz.svg';
+import bookOpenSvgStr from '../style/icons/book_open.svg';
+import vectorSquareSvgStr from '../style/icons/vector_square.svg';
+import infoSvgStr from '../style/icons/info-solid.svg';
+import clockSvgStr from '../style/icons/clock-solid.svg';
+import terminalToolbarSvgStr from '../style/icons/terminal_toolbar.svg';
 
 export const logoIcon = new LabIcon({
   name: 'jupytergis::logo',
@@ -60,3 +65,28 @@ export const logoMiniIconQGZ = new LabIcon({
   name: 'jupytergis::logoQGZ',
   svgstr: logoMiniQGZ
 });
+
+export const bookOpenIcon = new LabIcon({
+  name: 'jupytergis::bookOpen',
+  svgstr: bookOpenSvgStr
+});
+
+export const vectorSquareIcon = new LabIcon({
+  name: 'jupytergis::vectorSquare',
+  svgstr: vectorSquareSvgStr
+});
+
+export const infoIcon = new LabIcon({
+  name: 'jupytergis::info',
+  svgstr: infoSvgStr
+});
+
+export const clockIcon = new LabIcon({
+  name: 'jupytergis::clock',
+  svgstr: clockSvgStr
+});
+
+export const terminalToolbarIcon = new LabIcon({
+  name: 'jupytergis::terminalToolbar',
+  svgstr: terminalToolbarSvgStr
+});

packages/base/src/toolbar/widget.tsx

@@ -8,15 +8,14 @@ import {
   ToolbarButton,
   addIcon,
   redoIcon,
-  terminalIcon,
   undoIcon
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Menu, Widget } from '@lumino/widgets';
 
 import * as React from 'react';
 import { CommandIDs } from '../constants';
-import { rasterIcon } from '../icons';
+import { rasterIcon, terminalToolbarIcon } from '../icons';
 import { UsersItem } from './usertoolbaritem';
 
 export const TOOLBAR_SEPARATOR_CLASS = 'jGIS-Toolbar-Separator';
@@ -67,7 +66,7 @@ export class ToolbarWidget extends ReactiveToolbar {
           id: CommandIDs.toggleConsole,
           commands: options.commands,
           label: '',
-          icon: terminalIcon
+          icon: terminalToolbarIcon
         })
       );