add svgr plugin for svg as ReactComponent

src/Common/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import { useId } from "@uifabric/react-hooks";
-import InfoBubble from "images/info-bubble.svg";
+import { ReactComponent as InfoBubble } from "images/info-bubble.svg";
 import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
 import * as React from "react";
 
@@ -15,7 +15,7 @@ export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) =>
   return children ? (
     <span>
       <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
-        <img className="infoImg" src={InfoBubble} alt="More information" />
+        <InfoBubble />
       </TooltipHost>
     </span>
   ) : (

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -5,7 +5,7 @@
  */
 
 import CancelIcon from "images/cancel.svg";
-import CheckIcon from "images/check-disabled.svg"; // need to revert hardikn
+import CheckIcon from "images/check1.svg";
 import DeleteIcon from "images/delete.svg";
 import EditIcon from "images/Edit_entity.svg";
 import * as React from "react";

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -3,7 +3,7 @@
  */
 
 import LoaderIcon from "images/circular_loader_black_16x16.gif";
-import ClearIcon from "images/Clear-disabled.svg"; // need to revert hardikn
+import { ReactComponent as ClearIcon } from "images/Clear1.svg";
 import ErrorBlackIcon from "images/error_black.svg";
 import ErrorRedIcon from "images/error_red.svg";
 import infoBubbleIcon from "images/info-bubble-9x9.svg";
@@ -179,7 +179,7 @@ export class NotificationConsoleComponent extends React.Component<
                 onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.onClearNotificationsKeyPress(event)}
                 tabIndex={0}
               >
-                <img src={ClearIcon} alt="clear notifications image" />
+                <ClearIcon />
                 Clear Notifications
               </span>
             </div>

src/images/check.svg

@@ -1,10 +0,0 @@
-<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M14.01 0.72999L4.81001 9.93999L0.0100098 5.17999L0.78001 4.40999L4.78001 8.40999L13.21 -0.0100098L14.01 0.72999Z" fill="#0078D4"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="14" height="9.99" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/images/check1.svg

@@ -0,0 +1,12 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0)">
+        <path
+            d="M14.01 0.72999L4.81001 9.93999L0.0100098 5.17999L0.78001 4.40999L4.78001 8.40999L13.21 -0.0100098L14.01 0.72999Z"
+            fill="#0078D4" />
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <rect width="14" height="9.99" fill="white" />
+        </clipPath>
+    </defs>
+</svg>