add svgr plugin for svg as ReactComponent

package.json

@@ -104,6 +104,7 @@
     "@babel/preset-env": "7.9.0",
     "@babel/preset-react": "7.9.4",
     "@babel/preset-typescript": "7.9.0",
+    "@svgr/webpack": "5.5.0",
     "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",

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>

webpack.config.js

@@ -40,6 +40,10 @@ const lessRule = {
   exclude: [path.resolve(__dirname, "less/Common/Constants.less")],
 };
 
+const svgrRule = {
+  test: /\.svg$/,
+  use: ["@svgr/webpack"],
+};
 const imagesRule = {
   test: /\.(jpg|jpeg|png|gif|svg|pdf|ico)$/,
   loader: "file-loader",
@@ -89,7 +93,7 @@ const typescriptRule = {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 module.exports = function (_env = {}, argv = {}) {
   const mode = argv.mode || "development";
-  const rules = [fontRule, lessRule, imagesRule, cssRule, htmlRule, typescriptRule];
+  const rules = [fontRule, lessRule, svgrRule, imagesRule, cssRule, htmlRule, typescriptRule];
   const envVars = {
     GIT_SHA: gitSha,
     PORT: process.env.PORT || "1234",