Merge pull request #8936 from BabylonJS/msDestiny14/nme

NME: Updating Icons

nodeEditor/imgs/downArrow.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="17" height="17">
+  <path d="M4.21967 8.46967C4.51256 8.17678 4.98744 8.17678 5.28033 8.46967L12 15.1893L18.7197 8.46967C19.0126 8.17678 19.4874 8.17678 19.7803 8.46967C20.0732 8.76256 20.0732 9.23744 19.7803 9.53033L12.5303 16.7803C12.2374 17.0732 11.7626 17.0732 11.4697 16.7803L4.21967 9.53033C3.92678 9.23744 3.92678 8.76256 4.21967 8.46967Z" fill="white" />
+</svg>

nodeEditor/src/components/propertyTab/propertyTab.scss

@@ -570,6 +570,7 @@
                 
                 img {
                     height: 100%;
+                    width: 20px;
                 }
             }
 
@@ -579,6 +580,11 @@
                 align-items: center;
                 justify-items: center;
                 cursor: pointer;
+
+                img {
+                    height: 100%;
+                    width: 20px;
+                }
             }
         }   
 

nodeEditor/src/main.scss

@@ -169,10 +169,14 @@
             display: grid;
             grid-template-columns: 100%;
             grid-template-rows: 100%;
-            
+
+            img {
+                height: 40px;
+                width: 30px;  
+            }
             #color-picker-image {                
-                grid-column: 1;
-                grid-row: 1;
+                padding-left: 5px;
+                padding-bottom: 38px;
             }
 
             #color-picker {

nodeEditor/src/sharedComponents/color3LineComponent.tsx

@@ -3,12 +3,12 @@ import { Observable } from "babylonjs/Misc/observable";
 import { Color3, Color4 } from "babylonjs/Maths/math.color";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { NumericInputComponent } from "./numericInputComponent";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { GlobalState } from '../globalState';
 import { ColorPickerLineComponent } from './colorPickerComponent';
 
 const copyIcon: string = require("./copy.svg");
+const plusIcon: string = require("./plus.svg");
+const minusIcon: string = require("./minus.svg");
 
 export interface IColor3LineComponentProps {
     label: string;
@@ -139,7 +139,7 @@ export class Color3LineComponent extends React.Component<IColor3LineComponentPro
 
     render() {
 
-        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;
+        const expandedIcon = this.state.isExpanded ? minusIcon : plusIcon;
 
         return (
             <div className="color3Line">
@@ -156,7 +156,7 @@ export class Color3LineComponent extends React.Component<IColor3LineComponentPro
                         <img src={copyIcon} alt=""/>
                     </div>
                     <div className="expand hoverIcon" onClick={() => this.switchExpandState()} title="Expand">
-                        {chevron}
+                        <img src={expandedIcon} alt=""/>
                     </div>
                 </div>
                 {

nodeEditor/src/sharedComponents/color4LineComponent.tsx

@@ -3,12 +3,12 @@ import { Observable } from "babylonjs/Misc/observable";
 import { Color4 } from "babylonjs/Maths/math.color";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { NumericInputComponent } from "./numericInputComponent";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { GlobalState } from '../globalState';
 import { ColorPickerLineComponent } from './colorPickerComponent';
 
 const copyIcon: string = require("./copy.svg");
+const plusIcon: string = require("./plus.svg");
+const minusIcon: string = require("./minus.svg");
 
 export interface IColor4LineComponentProps {
     label: string;
@@ -150,7 +150,7 @@ export class Color4LineComponent extends React.Component<IColor4LineComponentPro
 
     render() {
 
-        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;
+        const expandedIcon = this.state.isExpanded ? minusIcon : plusIcon;
 
         return (
             <div className="color3Line">
@@ -167,7 +167,7 @@ export class Color4LineComponent extends React.Component<IColor4LineComponentPro
                         <img src={copyIcon} alt=""/>
                     </div>
                     <div className="expand hoverIcon" onClick={() => this.switchExpandState()} title="Expand">
-                        {chevron}
+                        <img src={expandedIcon} alt=""/>
                     </div>
                 </div>
                 {

nodeEditor/src/sharedComponents/lineContainerComponent.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
-
+const downArrow = require("../../imgs/downArrow.svg");
 
 interface ILineContainerComponentProps {
     title: string;
@@ -36,7 +34,7 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
                     {this.props.title}
                 </div>
                 <div className={className}>
-                    <FontAwesomeIcon icon={faChevronDown} />
+                    <img className="img" title={this.props.title} src={downArrow}/>
                 </div>
             </div>
         );

nodeEditor/src/sharedComponents/minus.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
+  <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+  <title>ic_fluent_remove_24_regular</title>
+  <desc>Created with Sketch.</desc>
+  <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="ic_fluent_remove_24_regular" fill="white" fill-rule="nonzero">
+      <path d="M3.7547787,12.4995322 L20.2466903,12.4995322 C20.6609039,12.4995322 20.9966903,12.1637458 20.9966903,11.7495322 C20.9966903,11.3353187 20.6609039,10.9995322 20.2466903,10.9995322 L3.7547787,10.9995322 C3.34056514,10.9995322 3.0047787,11.3353187 3.0047787,11.7495322 C3.0047787,12.1637458 3.34056514,12.4995322 3.7547787,12.4995322 Z" id="🎨-Color"></path>
+    </g>
+  </g>
+</svg>