Chore: Replace react-inlinesvg usage for the Icon component (#53736)

packages/grafana-ui/src/components/Icon/iconBundle.ts

@@ -165,7 +165,7 @@ import u1121 from '../../../../../public/img/icons/unicons/wrap-text.svg';
 import u1135 from '../../../../../public/img/icons/unicons/x.svg';
 
 export let cacheInitialized = false;
-export let iconRoot = 'public/img/icons';
+export let iconRoot = 'public/img/icons/';
 
 function cacheItem(content: string, path: string) {
   cacheStore[iconRoot + path] = { content, status: 'loaded' };

public/app/features/search/page/components/columns.tsx

@@ -1,6 +1,5 @@
 import { cx } from '@emotion/css';
 import React from 'react';
-import SVG from 'react-inlinesvg';
 
 import {
   DisplayProcessor,
@@ -334,7 +333,7 @@ function makeTypeColumn(
     Cell: (p) => {
       const i = p.row.index;
       const kind = kindField?.values.get(i) ?? 'dashboard';
-      let icon = 'public/img/icons/unicons/apps.svg';
+      let icon: IconName = 'apps';
       let txt = 'Dashboard';
       if (kind) {
         txt = kind;
@@ -344,12 +343,12 @@ function makeTypeColumn(
             break;
 
           case 'folder':
-            icon = 'public/img/icons/unicons/folder.svg';
+            icon = 'folder';
             txt = 'Folder';
             break;
 
           case 'panel':
-            icon = `public/img/icons/unicons/${PluginIconName.panel}.svg`;
+            icon = `${PluginIconName.panel}`;
             const type = typeField.values.get(i);
             if (type) {
               txt = type;
@@ -360,13 +359,13 @@ function makeTypeColumn(
                 switch (type) {
                   case 'row':
                     txt = 'Row';
-                    icon = `public/img/icons/unicons/bars.svg`;
+                    icon = `bars`;
                     break;
                   case 'singlestat': // auto-migration
                     txt = 'Singlestat';
                     break;
                   default:
-                    icon = `public/img/icons/unicons/question.svg`; // plugin not found
+                    icon = `question-circle`; // plugin not found
                 }
               }
             }
@@ -375,7 +374,7 @@ function makeTypeColumn(
       }
       return (
         <div {...p.cellProps} className={styles.typeText}>
-          <SVG src={icon} width={14} height={14} title={txt} className={styles.typeIcon} />
+          <Icon name={icon} size="sm" title={txt} className={styles.typeIcon} />
           {txt}
         </div>
       );

public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx

@@ -1,11 +1,10 @@
 import { Global } from '@emotion/react';
 import Tree from 'rc-tree';
 import React, { Key, useEffect, useMemo, useState } from 'react';
-import SVG from 'react-inlinesvg';
 
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Button, HorizontalGroup, useTheme2 } from '@grafana/ui';
+import { Button, HorizontalGroup, Icon, useTheme2 } from '@grafana/ui';
 import { ElementState } from 'app/features/canvas/runtime/element';
 
 import { AddLayerButton } from '../../../../core/components/Layers/AddLayerButton';
@@ -86,18 +85,22 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
     setAutoExpandParent(false);
   };
 
-  const getSvgIcon = (path = '', style = {}) => <SVG src={path} title={'Node Icon'} style={{ ...style }} />;
-
   const switcherIcon = (obj: { isLeaf: boolean; expanded: boolean }) => {
     if (obj.isLeaf) {
       // TODO: Implement element specific icons
-      return getSvgIcon('');
+      return <></>;
     }
 
-    return getSvgIcon('public/img/icons/unicons/angle-right.svg', {
-      transform: `rotate(${obj.expanded ? 90 : 0}deg)`,
-      fill: theme.colors.text.primary,
-    });
+    return (
+      <Icon
+        name="angle-right"
+        title={'Node Icon'}
+        style={{
+          transform: `rotate(${obj.expanded ? 90 : 0}deg)`,
+          fill: theme.colors.text.primary,
+        }}
+      />
+    );
   };
 
   const setAllowSelection = (allow = true) => {