Use svg icons only for the toolbar icons (#713)

Author: HaudinFlorence

packages/base/src/commands.ts

@@ -35,7 +35,9 @@ import {
   chamferIcon,
   filletIcon,
   wireframeIcon,
-  transformIcon
+  transformIcon,
+  pencilSolidIcon,
+  cameraSolidIcon
 } from './tools';
 import keybindings from './keybindings.json';
 import { DEFAULT_MESH_COLOR } from './3dview/helpers';
@@ -792,7 +794,7 @@ export function addCommands(
   });
   commands.addCommand(CommandIDs.newSketch, {
     label: trans.__('New Sketch'),
-    iconClass: 'fa fa-pencil',
+    icon: pencilSolidIcon,
     isEnabled: () => {
       return tracker.currentWidget
         ? tracker.currentWidget.model.sharedModel.editable
@@ -1087,7 +1089,7 @@ export function addCommands(
   commands.addCommand(CommandIDs.updateCameraSettings, {
     label: trans.__('Camera Settings'),
     isEnabled: () => Boolean(tracker.currentWidget),
-    iconClass: 'fa fa-camera',
+    icon: cameraSolidIcon,
     execute: async () => {
       const current = tracker.currentWidget;
 

packages/base/src/toolbar/widget.tsx

@@ -5,15 +5,15 @@ import {
   redoIcon,
   Toolbar,
   ReactiveToolbar,
-  undoIcon,
-  terminalIcon
+  undoIcon
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Widget } from '@lumino/widgets';
 import * as React from 'react';
 
 import { CommandIDs } from '../commands';
 import { UsersItem } from './usertoolbaritem';
+import { terminalToolbarIcon } from '../tools';
 
 export const TOOLBAR_SEPARATOR_CLASS = 'jcad-Toolbar-Separator';
 
@@ -226,7 +226,7 @@ export class ToolbarWidget extends ReactiveToolbar {
             id: CommandIDs.toggleConsole,
             commands: options.commands,
             label: '',
-            icon: terminalIcon
+            icon: terminalToolbarIcon
           })
         );
 

packages/base/src/tools.ts

@@ -24,6 +24,9 @@ import chamferIconStr from '../style/icon/chamfer.svg';
 import filletIconStr from '../style/icon/fillet.svg';
 import wireframeIconStr from '../style/icon/wireframe.svg';
 import chevronRightStr from '../style/icon/chevron-right.svg';
+import pencilSolidStr from '../style/icon/pencil-solid.svg';
+import cameraSolidStr from '../style/icon/camera-solid.svg';
+import terminalToolbarStr from '../style/icon/terminal-toolbar.svg';
 
 import visibilitySvg from '../style/icon/visibility.svg';
 import visibilityOffSvg from '../style/icon/visibilityOff.svg';
@@ -136,11 +139,27 @@ export const wireframeIcon = new LabIcon({
   name: 'jupytercad:wireframe-icon',
   svgstr: wireframeIconStr
 });
+
 export const chevronRightIcon = new LabIcon({
   name: 'jupytercad:chevron-right-icon',
   svgstr: chevronRightStr
 });
 
+export const pencilSolidIcon = new LabIcon({
+  name: 'jupytercad:pencil-solid-icon',
+  svgstr: pencilSolidStr
+});
+
+export const cameraSolidIcon = new LabIcon({
+  name: 'jupytercad:camera-solid-icon',
+  svgstr: cameraSolidStr
+});
+
+export const terminalToolbarIcon = new LabIcon({
+  name: 'jupytercad:terminal-toolbar-icon',
+  svgstr: terminalToolbarStr
+});
+
 export const debounce = (
   func: CallableFunction,
   timeout = 100