refactor: enhance icon system following FabIcon pattern

Author: lokanandaprabhu

workspaces/bulk-import/.changeset/configurable-instructions-section.md

@@ -9,7 +9,7 @@ This change introduces a fully configurable "Import to Red Hat Developer Hub" in
 **New Features:**
 
 - **Configurable Steps**: Define custom workflow steps via `app-config.yaml` with custom text and icons
-- **Icon Support**: Support for both built-in theme-aware icons and custom URL-based icons
+- **Enhanced Icon Support**: Comprehensive icon system supporting Backstage system icons, Material Design icons, SVG strings, URLs, and legacy built-in icons
 - **Dynamic Layout**: Steps automatically adjust width for optimal space usage (≤6 steps fill width, >6 steps scroll horizontally)
 - **User Preferences**: Collapsed/expanded state persisted in localStorage per user
 - **Universal Display**: Instructions section now shows for both PR flow and scaffolder flow
@@ -26,13 +26,23 @@ bulkImport:
   instructionsDefaultExpanded: true
 
   # Custom workflow steps
-  instructionsSteps:
-    - id: 'step1'
-      text: 'Choose your source control platform'
-      icon:
-        type: 'builtin' # or "url"
-        source: 'approval-tool' # icon name or URL
-    - id: 'step2'
-      text: 'Configure without icon'
-      # Steps without icons show text only
+    instructionsSteps:
+     - id: 'step1'
+       text: 'Choose your source control platform'
+       icon: 'kind:component' # Backstage system icon
+     - id: 'step2'
+       text: 'Browse repositories'
+       icon: 'search' # Material Design icon
+     - id: 'step3'
+       text: 'Custom SVG icon'
+       icon: '<svg xmlns="http://www.w3.org/2000/svg">...</svg>' # SVG string
+     - id: 'step4'
+       text: 'External icon'
+       icon: 'https://example.com/icon.png' # URL
+     - id: 'step5'
+       text: 'Legacy built-in icon'
+       icon: 'approval-tool' # Legacy format (backward compatible)
+     - id: 'step6'
+       text: 'No icon step'
+       # Steps without icons show text only
 ```

workspaces/bulk-import/plugins/bulk-import/config.d.ts

@@ -69,23 +69,15 @@ export interface Config {
       text: string;
 
       /**
-       * Icon configuration
+       * Icon configuration - supports multiple formats:
+       * - Backstage system icons: 'kind:component', 'kind:api', etc.
+       * - Material Design icons: 'settings', 'home', 'build', etc.
+       * - SVG strings: '<svg xmlns="http://www.w3.org/2000/svg">...</svg>'
+       * - URLs: 'https://example.com/icon.png', '/assets/icon.svg'
+       * - Data URIs: 'data:image/svg+xml;base64,...'
        * @visibility frontend
        */
-      icon?: {
-        /**
-         * Icon type: 'builtin' for predefined icons, 'url' for custom images
-         * @visibility frontend
-         */
-        type: 'builtin' | 'url';
-
-        /**
-         * For builtin: icon name (e.g., 'approval-tool', 'choose-repositories', 'generate-cataloginfo', 'edit-pullrequest', 'track-status')
-         * For url: full URL to the icon image
-         * @visibility frontend
-         */
-        source: string;
-      };
+      icon?: string;
     }>;
   };
 }

workspaces/bulk-import/plugins/bulk-import/src/components/AddRepositories/ConfigurableInstructions.tsx

@@ -26,93 +26,13 @@ import Typography from '@mui/material/Typography';
 
 import { useInstructionsConfig, useInstructionsPreference } from '../../hooks';
 import { useTranslation } from '../../hooks/useTranslation';
-import { Illustrations } from './Illustrations';
-
-interface ConfigurableInstructionsProps {
-  // No props needed - everything comes from configuration
-}
-
-/**
- * Enhanced Illustrations component that supports custom URL icons
- */
-const ConfigurableIllustration = ({
-  iconClassname,
-  iconText,
-}: {
-  iconClassname: string;
-  iconText: string;
-}) => {
-  // If no icon is configured, show only text
-  if (!iconClassname) {
-    return (
-      <div>
-        {/* Empty space to maintain consistent layout with icon steps */}
-        <Typography
-          component="span"
-          style={{
-            justifyContent: 'center',
-            display: 'flex',
-            height: '100px',
-          }}
-        >
-          {/* Empty space where icon would be */}
-        </Typography>
-        <Typography
-          style={{
-            maxWidth: '150px',
-            textAlign: 'center',
-          }}
-        >
-          {iconText}
-        </Typography>
-      </div>
-    );
-  }
-
-  // Check if this is a custom URL icon
-  const isCustomUrl = iconClassname.startsWith('custom-url:');
-
-  if (isCustomUrl) {
-    const imageUrl = iconClassname.replace('custom-url:', '');
-    return (
-      <div>
-        <Typography
-          component="span"
-          style={{
-            justifyContent: 'center',
-            display: 'flex',
-          }}
-        >
-          <img
-            src={imageUrl}
-            alt={iconText}
-            height="100px"
-            style={{ objectFit: 'contain' }}
-          />
-        </Typography>
-        <Typography
-          style={{
-            maxWidth: '150px',
-            textAlign: 'center',
-          }}
-        >
-          {iconText}
-        </Typography>
-      </div>
-    );
-  }
-
-  // Use the existing Illustrations component for built-in icons
-  return <Illustrations iconClassname={iconClassname} iconText={iconText} />;
-};
+import { InstructionIcon } from './InstructionIcon';
 
 /**
  * Configurable instructions component that displays the "How does it work" section
  * based on configuration from app-config.yaml and user preferences
  */
-export const ConfigurableInstructions: React.FC<
-  ConfigurableInstructionsProps
-> = () => {
+export const ConfigurableInstructions = () => {
   const theme = useTheme();
   const { t } = useTranslation();
   const config = useInstructionsConfig();
@@ -122,31 +42,12 @@ export const ConfigurableInstructions: React.FC<
 
   // Build the list of steps based on configuration from app-config.yaml
   const steps = useMemo(() => {
-    return config.steps.map(configStep => {
-      let iconClassname = '';
-
-      if (configStep.icon) {
-        if (configStep.icon.type === 'builtin') {
-          // For builtin icons, construct the classname based on theme
-          const iconName = configStep.icon.source;
-          iconClassname =
-            theme.palette.mode === 'dark'
-              ? `icon-${iconName}-white`
-              : `icon-${iconName}-black`;
-        } else if (configStep.icon.type === 'url') {
-          // For URL icons, we'll use the URL directly in a special way
-          iconClassname = `custom-url:${configStep.icon.source}`;
-        }
-      }
-      // No fallback - leave iconClassname empty if no icon is configured
-
-      return {
-        id: configStep.id,
-        text: configStep.text,
-        iconClassname,
-      };
-    });
-  }, [config.steps, theme.palette.mode]);
+    return config.steps.map(configStep => ({
+      id: configStep.id,
+      text: configStep.text,
+      icon: configStep.icon,
+    }));
+  }, [config.steps]);
 
   // Don't render if disabled or no steps configured
   if (!config.enabled || steps.length === 0) {
@@ -217,10 +118,7 @@ export const ConfigurableInstructions: React.FC<
                   justifyContent: 'flex-start',
                 }}
               >
-                <ConfigurableIllustration
-                  iconClassname={step.iconClassname}
-                  iconText={step.text}
-                />
+                <InstructionIcon icon={step.icon} text={step.text} />
               </Box>
             ))}
           </Box>