@idealyst/components 1.1.8 → 1.1.9

package/plugin/web.js

@@ -1,614 +1,362 @@
 /**
- * Enhanced MDI Auto-Import Babel Plugin v2.0
+ * MDI Icon Registry Babel Plugin
+ *
+ * This plugin scans for icon names used in components and registers them
+ * with the IconRegistry at build time. Icons are looked up from the registry
+ * at runtime.
  *
  * Features:
- * 1. Context-aware string replacement - only transforms strings used with Icon component
- * 2. Namespace prefix support - "mdi:iconname" guarantees transformation
- * 3. Variable tracking with scope analysis - follows variables back to their declarations
- * 4. No false positives - only transforms Icon-related strings
- * 5. Button/Badge/Breadcrumb/Menu icon prop transformation with path injection
+ * 1. Static analysis - scans JSX for icon names
+ * 2. Config icons - force-include icons via babel config
+ * 3. Registry population - generates code to register discovered icons
+ * 4. Validates against actual @mdi/js exports
+ *
+ * Config options:
+ * - debug: boolean - enable debug logging
+ * - icons: string[] - array of icon names to always include
  */
 
+// Load @mdi/js exports for validation
+let mdiExports = null;
+try {
+  mdiExports = require('@mdi/js');
+} catch (e) {
+  console.warn('[mdi-registry-plugin] Could not load @mdi/js for validation. Icons will not be validated.');
+}
+
 module.exports = function ({ types: t }, options = {}) {
   const debug = options.debug || false;
-  const manifestPath = options.manifestPath || './icons.manifest.json';
+  const configIcons = options.icons || [];
 
-  // Debug logging function that only logs when debug is enabled
   const debugLog = (...args) => {
     if (debug) {
-      console.log(...args);
+      console.log('[mdi-registry-plugin]', ...args);
     }
   };
 
-  debugLog('[mdi-auto-import-enhanced] Plugin loaded');
-
-  const importedIcons = new Set();
-  const iconImportIdentifiers = new Map();
-  let hasIconImport = false;
-  let manifestIcons = new Set();
-
-  // Track variables that are used with Icon component
-  const iconRelatedVariables = new Set();
-
-  // Load icon manifest if it exists
-  function loadIconManifest() {
-    try {
-      const fs = require('fs');
-      const path = require('path');
-
-      const fullPath = path.resolve(process.cwd(), manifestPath);
-
-      if (fs.existsSync(fullPath)) {
-        const manifestContent = fs.readFileSync(fullPath, 'utf8');
-        const manifest = JSON.parse(manifestContent);
-
-        if (manifest.icons && Array.isArray(manifest.icons)) {
-          manifest.icons.forEach(iconName => {
-            if (typeof iconName === 'string') {
-              manifestIcons.add(iconName);
-            }
-          });
-          debugLog(`[mdi-auto-import-enhanced] Loaded ${manifestIcons.size} icons from manifest: ${fullPath}`);
-        } else {
-          console.warn(`[mdi-auto-import-enhanced] Invalid manifest format in ${fullPath}. Expected { "icons": ["icon-name", ...] }`);
-        }
-      }
-    } catch (error) {
-      console.warn(`[mdi-auto-import-enhanced] Error loading manifest from ${manifestPath}: ${error.message}`);
-    }
-  }
+  debugLog('Plugin loaded with config icons:', configIcons);
+  debugLog('@mdi/js loaded:', mdiExports ? 'yes' : 'no');
 
-  function formatIconName(name) {
+  /**
+   * Convert kebab-case icon name to MDI import name
+   * e.g., "home" -> "mdiHome", "account-circle" -> "mdiAccountCircle"
+   */
+  function toMdiImportName(name) {
     if (!name || typeof name !== 'string') {
-      throw new Error(`Invalid icon name: ${name}`);
+      return null;
     }
 
-    // Strip mdi: prefix if it exists (safety check, should already be stripped)
-    const cleanName = name.startsWith('mdi:') ? name.substring(4) : name;
+    // Strip mdi: prefix if present
+    const cleanName = name.startsWith('mdi:') ? name.slice(4) : name;
 
-    // Check if the name contains only valid characters (letters, numbers, hyphens, underscores)
-    if (!/^[a-zA-Z0-9-_]+$/.test(cleanName)) {
-      debugLog(`[mdi-auto-import-enhanced] formatIconName: Invalid icon name "${name}" (contains special characters), using "help-circle" as fallback`);
-      return 'HelpCircle';
+    // Validate: only allow alphanumeric and hyphens
+    if (!/^[a-zA-Z0-9-]+$/.test(cleanName)) {
+      debugLog(`Invalid icon name format: "${name}"`);
+      return null;
     }
 
-    const formatted = cleanName
-      .replace(/[-_:]/g, ' ')  // Also handle colons
-      .replace(/([a-z])([A-Z])/g, '$1 $2')
-      .split(' ')
-      .filter(part => part.length > 0)
+    // Convert kebab-case to PascalCase and prefix with mdi
+    const pascalCase = cleanName
+      .split('-')
       .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
       .join('');
 
-    debugLog(`[mdi-auto-import-enhanced] formatIconName: ${name} -> ${formatted}`);
-    return formatted;
-  }
-
-  function getMdiIconName(name) {
-    // First ensure the name has mdi: prefix stripped (safety check)
-    const cleanName = name.startsWith('mdi:') ? name.substring(4) : name;
-    const mdiName = `mdi${formatIconName(cleanName)}`;
-    debugLog(`[mdi-auto-import-enhanced] getMdiIconName: ${name} -> ${mdiName}`);
-    return mdiName;
-  }
+    const mdiName = `mdi${pascalCase}`;
 
-  function getIconIdentifier(iconName) {
-    if (!iconImportIdentifiers.has(iconName)) {
-      // Sanitize the icon name to create a valid JavaScript identifier
-      // Remove any characters that aren't valid in identifiers
-      const sanitized = iconName.replace(/[^a-zA-Z0-9_$]/g, '');
-      iconImportIdentifiers.set(iconName, `_${sanitized}`);
+    // Validate against actual @mdi/js exports
+    if (mdiExports && !(mdiName in mdiExports)) {
+      debugLog(`Icon "${name}" (${mdiName}) not found in @mdi/js`);
+      return null;
     }
-    const identifier = iconImportIdentifiers.get(iconName);
-    debugLog(`[mdi-auto-import-enhanced] getIconIdentifier: ${iconName} -> ${identifier}`);
-    return identifier;
+
+    return mdiName;
   }
 
   /**
-   * Extract icon name from string, handling namespace prefix
-   * Returns null if not a valid icon string
+   * Normalize icon name for registry key (lowercase, no prefix)
+   * Returns null for invalid icon names
    */
-  function extractIconName(str) {
-    if (!str || typeof str !== 'string') return null;
+  function normalizeIconName(name) {
+    if (!name || typeof name !== 'string') return null;
+    const clean = name.startsWith('mdi:') ? name.slice(4) : name;
+    const normalized = clean.toLowerCase();
+
+    // Only allow alphanumeric and hyphens
+    if (!/^[a-zA-Z0-9-]+$/.test(normalized)) {
+      return null;
+    }
 
-    // Handle namespace prefix: "mdi:home" -> "home"
-    if (str.startsWith('mdi:')) {
-      return str.substring(4);
+    // Validate by checking if toMdiImportName succeeds
+    const mdiName = toMdiImportName(normalized);
+    if (!mdiName) {
+      return null;
     }
 
-    return str;
+    return normalized;
   }
 
   /**
-   * Check if a string literal is icon-related based on context
+   * Extract icon name from a string value
    */
-  function isIconRelatedString(path, stringValue) {
-    // Always transform if it has the mdi: prefix
-    if (stringValue.startsWith('mdi:')) {
-      debugLog(`[mdi-auto-import-enhanced] String "${stringValue}" has mdi: prefix - will transform`);
-      return true;
-    }
-
-    // Check if this string is in the manifest
-    if (manifestIcons.has(stringValue)) {
-      debugLog(`[mdi-auto-import-enhanced] String "${stringValue}" is in manifest - will transform`);
-      return true;
-    }
+  function extractIconName(str) {
+    if (!str || typeof str !== 'string') return null;
+    // Strip mdi: prefix if present
+    return str.startsWith('mdi:') ? str.slice(4) : str;
+  }
 
-    // Icon prop names to check
-    const iconPropNames = ['name', 'leftIcon', 'rightIcon', 'icon'];
-
-    // Walk up the tree to find context
-    let currentPath = path;
-    while (currentPath) {
-      const node = currentPath.node;
-
-      // Check if we're in a JSXAttribute with an icon-related prop name
-      if (t.isJSXAttribute(currentPath.parent)) {
-        const attr = currentPath.parent;
-        if (t.isJSXIdentifier(attr.name) && iconPropNames.includes(attr.name.name)) {
-          // Now check if the parent JSXOpeningElement is Icon, Button, Badge, etc.
-          const openingElement = currentPath.parentPath.parent;
-          if (t.isJSXOpeningElement(openingElement)) {
-            if (t.isJSXIdentifier(openingElement.name)) {
-              const componentName = openingElement.name.name;
-              debugLog(`[mdi-auto-import-enhanced] String "${stringValue}" is in ${componentName}.${attr.name.name} prop - will transform`);
-              return true;
+  return {
+    name: 'mdi-registry-plugin',
+    visitor: {
+      Program: {
+        enter(path, state) {
+          // Initialize state for this file
+          state.iconNames = new Set();
+          state.hasIconUsage = false;
+
+          debugLog('Processing file:', state.filename || 'unknown');
+
+          // Add config icons
+          configIcons.forEach(iconName => {
+            const normalized = normalizeIconName(iconName);
+            if (normalized) {
+              state.iconNames.add(normalized);
+              debugLog(`Added config icon: ${normalized}`);
             }
-          }
-        }
-      }
+          });
+        },
 
-      // Check if we're assigned to a variable that's used with Icon
-      if (t.isVariableDeclarator(currentPath.parent)) {
-        const declarator = currentPath.parent;
-        if (t.isIdentifier(declarator.id)) {
-          const varName = declarator.id.name;
-          if (iconRelatedVariables.has(varName)) {
-            debugLog(`[mdi-auto-import-enhanced] String "${stringValue}" is in icon-related variable "${varName}" - will transform`);
-            return true;
+        exit(path, state) {
+          // If no icons found, nothing to do
+          if (state.iconNames.size === 0) {
+            debugLog('No icons found, skipping registration');
+            return;
           }
-        }
-      }
-
-      currentPath = currentPath.parentPath;
-    }
 
-    return false;
-  }
+          debugLog(`Found ${state.iconNames.size} icons:`, Array.from(state.iconNames));
 
-  /**
-   * Track variables that are used with Icon component
-   * This runs in a first pass to identify which variables are icon-related
-   */
-  function trackIconRelatedVariables(programPath) {
-    // Components that accept icon props
-    const componentsWithIconProps = {
-      'Icon': ['name'],
-      'Button': ['leftIcon', 'rightIcon'],
-      'Badge': ['icon'],
-      'Breadcrumb': ['icon'],
-      'Menu': ['icon']
-    };
-
-    programPath.traverse({
-      JSXElement(path) {
-        const { node } = path;
+          // Build the import specifiers for @mdi/js
+          const iconImports = [];
+          const registryEntries = [];
 
-        if (t.isJSXIdentifier(node.openingElement.name)) {
-          const componentName = node.openingElement.name.name;
-          const iconProps = componentsWithIconProps[componentName];
-
-          if (iconProps) {
-            // Find all icon-related attributes
-            iconProps.forEach(propName => {
-              const attr = node.openingElement.attributes.find(attr =>
-                t.isJSXAttribute(attr) &&
-                t.isJSXIdentifier(attr.name) &&
-                attr.name.name === propName
+          state.iconNames.forEach(iconName => {
+            const mdiName = toMdiImportName(iconName);
+            if (mdiName) {
+              // Create unique local identifier
+              const localId = `_${mdiName}`;
+              iconImports.push(
+                t.importSpecifier(t.identifier(localId), t.identifier(mdiName))
               );
+              // Create registry entry: 'icon-name': _mdiIconName
+              registryEntries.push(
+                t.objectProperty(
+                  t.stringLiteral(iconName),
+                  t.identifier(localId)
+                )
+              );
+            }
+          });
 
-              if (attr && t.isJSXExpressionContainer(attr.value)) {
-                const expression = attr.value.expression;
-
-                // Track any identifiers used in the icon prop
-                if (t.isIdentifier(expression)) {
-                  iconRelatedVariables.add(expression.name);
-                  debugLog(`[mdi-auto-import-enhanced] Tracked icon-related variable: ${expression.name} (from ${componentName}.${propName})`);
-
-                  // Follow the binding to find its declaration
-                  const binding = path.scope.getBinding(expression.name);
-                  if (binding && binding.path.isVariableDeclarator()) {
-                    const init = binding.path.node.init;
-                    if (t.isStringLiteral(init)) {
-                      debugLog(`[mdi-auto-import-enhanced] Variable ${expression.name} = "${init.value}"`);
-                    }
-                  }
-                }
-
-                // Track variables in ternaries and logical expressions
-                path.traverse({
-                  Identifier(idPath) {
-                    // Only track top-level identifiers, not property accesses
-                    if (!t.isMemberExpression(idPath.parent)) {
-                      iconRelatedVariables.add(idPath.node.name);
-                      debugLog(`[mdi-auto-import-enhanced] Tracked icon-related variable in expression: ${idPath.node.name} (from ${componentName}.${propName})`);
-                    }
-                  }
-                });
-              }
-            });
+          if (iconImports.length === 0) {
+            debugLog('No valid icons to register');
+            return;
           }
-        }
-      }
-    });
-  }
 
-  /**
-   * Extract all icon names from an expression, now with context awareness
-   */
-  function extractIconNames(expression, path) {
-    const iconNames = new Set();
-
-    function traverse(node, nodePath) {
-      if (!node) return;
+          // Create: import { mdiHome as _mdiHome, ... } from '@mdi/js';
+          const mdiImport = t.importDeclaration(
+            iconImports,
+            t.stringLiteral('@mdi/js')
+          );
 
-      if (t.isStringLiteral(node)) {
-        const iconName = extractIconName(node.value);
-        if (iconName) {
-          iconNames.add(iconName);
-          debugLog(`[mdi-auto-import-enhanced] Found icon name: ${iconName} (from "${node.value}")`);
-        }
-      }
-      else if (t.isConditionalExpression(node)) {
-        debugLog('[mdi-auto-import-enhanced] Processing conditional expression');
-        traverse(node.consequent, nodePath);
-        traverse(node.alternate, nodePath);
-      }
-      else if (t.isLogicalExpression(node)) {
-        debugLog('[mdi-auto-import-enhanced] Processing logical expression');
-        traverse(node.left, nodePath);
-        traverse(node.right, nodePath);
-      }
-      else if (t.isTemplateLiteral(node)) {
-        if (node.expressions.length === 0 && node.quasis.length === 1) {
-          const value = node.quasis[0].value.cooked;
-          const iconName = extractIconName(value);
-          if (iconName) {
-            iconNames.add(iconName);
-            debugLog(`[mdi-auto-import-enhanced] Found icon name in template literal: ${iconName}`);
-          }
-        }
-      }
-      else if (t.isIdentifier(node)) {
-        debugLog(`[mdi-auto-import-enhanced] Following identifier: ${node.name}`);
-
-        // Try to resolve the identifier to its value
-        const binding = path.scope.getBinding(node.name);
-        if (binding && binding.path.isVariableDeclarator()) {
-          const init = binding.path.node.init;
-          if (init) {
-            traverse(init, binding.path);
+          // Determine the import path for IconRegistry
+          // If we're inside the components package, use relative import to avoid circular deps
+          const filename = state.filename || '';
+          const isInsideComponentsPackage = filename.includes('packages/components/src') ||
+                                            filename.includes('packages\\components\\src');
+
+          let registryImportPath = '@idealyst/components';
+          if (isInsideComponentsPackage) {
+            // Calculate relative path to Icon/IconRegistry
+            const path = require('path');
+            const fileDir = path.dirname(filename);
+            const registryPath = path.join(filename.split('packages/components/src')[0] || filename.split('packages\\components\\src')[0], 'packages/components/src/Icon/IconRegistry');
+            let relativePath = path.relative(fileDir, registryPath).replace(/\\/g, '/');
+            if (!relativePath.startsWith('.')) {
+              relativePath = './' + relativePath;
+            }
+            registryImportPath = relativePath;
+            debugLog(`Using relative import for IconRegistry: ${registryImportPath}`);
           }
-        }
-      }
-    }
 
-    traverse(expression, path);
-    return Array.from(iconNames);
-  }
+          // Create: import { IconRegistry } from '...' ;
+          const registryImport = t.importDeclaration(
+            [t.importSpecifier(t.identifier('IconRegistry'), t.identifier('IconRegistry'))],
+            t.stringLiteral(registryImportPath)
+          );
 
-  return {
-    name: 'mdi-auto-import-enhanced',
-    visitor: {
-      Program: {
-        enter(path) {
-          // Reset state for each file
-          importedIcons.clear();
-          iconImportIdentifiers.clear();
-          hasIconImport = false;
-          manifestIcons.clear();
-          iconRelatedVariables.clear();
-
-          // Load icon manifest
-          loadIconManifest();
-
-          // Add all manifest icons to the import list
-          manifestIcons.forEach(iconName => {
-            try {
-              const mdiIconName = getMdiIconName(iconName);
-              importedIcons.add(mdiIconName);
-              debugLog(`[mdi-auto-import-enhanced] Added manifest icon to import list: ${mdiIconName}`);
-            } catch (error) {
-              console.error(`[mdi-auto-import-enhanced] Error processing manifest icon "${iconName}": ${error.message}`);
+          // Create: IconRegistry.registerMany({ 'home': _mdiHome, ... });
+          const registerCall = t.expressionStatement(
+            t.callExpression(
+              t.memberExpression(
+                t.identifier('IconRegistry'),
+                t.identifier('registerMany')
+              ),
+              [t.objectExpression(registryEntries)]
+            )
+          );
+
+          // Insert at the top of the file (after existing imports)
+          // Find the last import declaration
+          let lastImportIndex = -1;
+          path.node.body.forEach((node, index) => {
+            if (t.isImportDeclaration(node)) {
+              lastImportIndex = index;
             }
           });
 
-          // First pass: track which variables are icon-related
-          trackIconRelatedVariables(path);
+          // Insert after last import, or at the beginning if no imports
+          const insertIndex = lastImportIndex + 1;
 
-          // Check if Icon is already imported from @mdi/react
-          path.node.body.forEach(node => {
-            if (t.isImportDeclaration(node) && node.source.value === '@mdi/react') {
-              debugLog('[mdi-auto-import-enhanced] Found @mdi/react import');
-              const hasIconSpecifier = node.specifiers.some(spec =>
-                t.isImportDefaultSpecifier(spec) && spec.local.name === 'MdiIcon'
-              );
-              if (hasIconSpecifier) {
-                debugLog('[mdi-auto-import-enhanced] MdiIcon already imported');
-                hasIconImport = true;
-              }
-            }
-          });
-        },
-        exit(path) {
-          if (importedIcons.size === 0) {
-            return;
-          }
-          debugLog(`[mdi-auto-import-enhanced] importedIcons.size: ${importedIcons.size}`);
-
-          // Add imports at the top of the file if any icons were used
-          if (importedIcons.size > 0) {
-            debugLog('[mdi-auto-import-enhanced] Adding imports for icons:', Array.from(importedIcons));
-
-            // Import individual icons from @mdi/js
-            const iconImportSpecifiers = Array.from(importedIcons).map(iconName => {
-              const identifier = getIconIdentifier(iconName);
-              return t.importSpecifier(
-                t.identifier(identifier),
-                t.identifier(iconName)
-              );
-            });
-
-            const iconImportDeclaration = t.importDeclaration(
-              iconImportSpecifiers,
-              t.stringLiteral('@mdi/js')
-            );
-
-            // Import Icon component from @mdi/react if not already imported
-            if (!hasIconImport) {
-              debugLog('[mdi-auto-import-enhanced] Adding MdiIcon import from @mdi/react');
-              const iconComponentImport = t.importDeclaration(
-                [t.importDefaultSpecifier(t.identifier('MdiIcon'))],
-                t.stringLiteral('@mdi/react')
-              );
-              path.unshiftContainer('body', iconComponentImport);
-            } else {
-              debugLog('[mdi-auto-import-enhanced] MdiIcon already imported, skipping');
-            }
+          // Insert in reverse order so they end up in correct order
+          path.node.body.splice(insertIndex, 0, mdiImport);
+          path.node.body.splice(insertIndex, 0, registryImport);
+          path.node.body.splice(insertIndex + 2, 0, registerCall);
 
-            // Add icon imports
-            path.unshiftContainer('body', iconImportDeclaration);
-            debugLog('[mdi-auto-import-enhanced] Imports added successfully');
-          } else {
-            debugLog('[mdi-auto-import-enhanced] No icons to import');
-          }
+          debugLog('Injected registration code');
         }
       },
 
-      JSXElement(path) {
+      // Track icon names in JSX elements
+      JSXElement(path, state) {
         const { node } = path;
 
-        // Handle Badge, Button, Breadcrumb, Menu components with icon props
-        if (t.isJSXIdentifier(node.openingElement.name)) {
-          const componentName = node.openingElement.name.name;
-          const iconPropMapping = {
-            'Button': { props: ['leftIcon', 'rightIcon'], pathProps: ['leftIconPath', 'rightIconPath'] },
-            'Badge': { props: ['icon'], pathProps: ['iconPath'] },
-            'Breadcrumb': { props: ['icon'], pathProps: ['iconPath'] },
-            'Menu': { props: ['icon'], pathProps: ['iconPath'] }
-          };
-
-          const iconConfig = iconPropMapping[componentName];
-          if (iconConfig) {
-            debugLog(`[mdi-auto-import-enhanced] JSXElement visitor - Found ${componentName}`);
-
-            // Process each icon prop
-            iconConfig.props.forEach((propName, index) => {
-              const attr = node.openingElement.attributes.find(attr =>
-                t.isJSXAttribute(attr) &&
-                t.isJSXIdentifier(attr.name) &&
-                attr.name.name === propName
-              );
-
-              if (attr && t.isStringLiteral(attr.value)) {
-                const stringValue = attr.value.value;
-                const iconName = extractIconName(stringValue);
-
-                if (iconName) {
-                  debugLog(`[mdi-auto-import-enhanced]   - Found ${propName}="${stringValue}" (StringLiteral)`);
-
-                  try {
-                    const mdiIconName = getMdiIconName(iconName);
-                    const iconIdentifier = getIconIdentifier(mdiIconName);
-                    importedIcons.add(mdiIconName);
-                    debugLog(`[mdi-auto-import-enhanced]   - Added icon from ${componentName}.${propName}: ${mdiIconName}`);
-
-                    // Add the corresponding path prop (e.g., leftIconPath, rightIconPath, iconPath)
-                    const pathPropName = iconConfig.pathProps[index];
-                    const pathAttr = t.jsxAttribute(
-                      t.jsxIdentifier(pathPropName),
-                      t.jsxExpressionContainer(t.identifier(iconIdentifier))
-                    );
-
-                    // Add the path attribute to the component
-                    node.openingElement.attributes.push(pathAttr);
-                    debugLog(`[mdi-auto-import-enhanced]   - Added ${pathPropName}={${iconIdentifier}} to ${componentName}`);
-                  } catch (error) {
-                    console.error(`[mdi-auto-import-enhanced] Error processing icon "${iconName}" from ${componentName}.${propName}: ${error.message}`);
-                  }
-                }
-              } else if (attr) {
-                const attrType = attr.value?.type || 'unknown';
-                debugLog(`[mdi-auto-import-enhanced]   - Found ${propName} (${attrType})`);
-              }
-            });
-          }
+        if (!t.isJSXIdentifier(node.openingElement.name)) {
+          return;
         }
 
-        // Check if this is an Icon component from @idealyst/components
-        if (
-          t.isJSXIdentifier(node.openingElement.name) &&
-          node.openingElement.name.name === 'Icon'
-        ) {
-
-          // Find the name attribute
-          const nameAttr = node.openingElement.attributes.find(attr =>
+        const componentName = node.openingElement.name.name;
+
+        // Map of components to their icon prop names
+        const iconPropMap = {
+          'Icon': ['name'],
+          'IconSvg': ['name'],  // Internal component also uses name prop now
+          'Button': ['leftIcon', 'rightIcon'],
+          'Badge': ['icon'],
+          'Breadcrumb': ['icon'],
+          'Menu': ['icon'],
+          'MenuItem': ['icon'],
+          'ListItem': ['leading', 'trailing'],
+          'Alert': ['icon'],
+          'Chip': ['icon', 'deleteIcon'],
+          'Input': ['leftIcon', 'rightIcon'],
+        };
+
+        const iconProps = iconPropMap[componentName];
+        if (!iconProps) return;
+
+        state.hasIconUsage = true;
+
+        // Check each icon prop
+        iconProps.forEach(propName => {
+          const attr = node.openingElement.attributes.find(attr =>
             t.isJSXAttribute(attr) &&
             t.isJSXIdentifier(attr.name) &&
-            attr.name.name === 'name'
+            attr.name.name === propName
           );
 
-          if (!nameAttr) {
-            debugLog('[mdi-auto-import-enhanced] No name attribute found');
-            return;
-          }
+          if (!attr) return;
 
-          let iconNames = [];
-
-          // Handle both string literals and JSX expressions
-          if (nameAttr && t.isStringLiteral(nameAttr.value)) {
-            const iconName = extractIconName(nameAttr.value.value);
+          // Handle string literal: icon="home"
+          if (t.isStringLiteral(attr.value)) {
+            const iconName = extractIconName(attr.value.value);
             if (iconName) {
-              iconNames = [iconName];
-              debugLog(`[mdi-auto-import-enhanced] Found direct string literal: ${iconName}`);
-            }
-          } else if (nameAttr && t.isJSXExpressionContainer(nameAttr.value)) {
-            // Handle JSX expressions with enhanced detection
-            const expression = nameAttr.value.expression;
-            iconNames = extractIconNames(expression, path);
-
-            if (iconNames.length === 0) {
-              debugLog(`[mdi-auto-import-enhanced] Cannot determine icon name for dynamic expression`);
-              return;
+              const normalized = normalizeIconName(iconName);
+              if (normalized) {
+                state.iconNames.add(normalized);
+                debugLog(`Found icon in ${componentName}.${propName}: ${normalized}`);
+              }
             }
           }
-
-          if (iconNames.length > 0) {
-            debugLog(`[mdi-auto-import-enhanced] Processing icons: ${iconNames.join(', ')}`);
-
-            // Process each icon name found
-            const processedIcons = [];
-            iconNames.forEach(iconName => {
-              try {
-                const mdiIconName = getMdiIconName(iconName);
-                const iconIdentifier = getIconIdentifier(mdiIconName);
-
-                // Track that we need to import this icon
-                importedIcons.add(mdiIconName);
-                processedIcons.push({ iconName, mdiIconName, iconIdentifier });
-                debugLog(`[mdi-auto-import-enhanced] Added icon to import list: ${mdiIconName}`);
-              } catch (error) {
-                console.error(`[mdi-auto-import-enhanced] Error processing icon "${iconName}": ${error.message}`);
+          // Handle JSX expression: icon={"home"} or icon={variable}
+          else if (t.isJSXExpressionContainer(attr.value)) {
+            const expr = attr.value.expression;
+
+            if (t.isStringLiteral(expr)) {
+              const iconName = extractIconName(expr.value);
+              if (iconName) {
+                const normalized = normalizeIconName(iconName);
+                if (normalized) {
+                  state.iconNames.add(normalized);
+                  debugLog(`Found icon in ${componentName}.${propName}: ${normalized}`);
+                }
+              }
+            }
+            // Handle ternary: condition ? "icon1" : "icon2"
+            else if (t.isConditionalExpression(expr)) {
+              [expr.consequent, expr.alternate].forEach(branch => {
+                if (t.isStringLiteral(branch)) {
+                  const iconName = extractIconName(branch.value);
+                  if (iconName) {
+                    const normalized = normalizeIconName(iconName);
+                    if (normalized) {
+                      state.iconNames.add(normalized);
+                      debugLog(`Found icon in ternary: ${normalized}`);
+                    }
+                  }
+                }
+              });
+            }
+            // Handle logical expression: condition && "icon"
+            else if (t.isLogicalExpression(expr)) {
+              [expr.left, expr.right].forEach(side => {
+                if (t.isStringLiteral(side)) {
+                  const iconName = extractIconName(side.value);
+                  if (iconName) {
+                    const normalized = normalizeIconName(iconName);
+                    if (normalized) {
+                      state.iconNames.add(normalized);
+                      debugLog(`Found icon in logical expr: ${normalized}`);
+                    }
+                  }
+                }
+              });
+            }
+            // Handle variable reference - try to resolve
+            else if (t.isIdentifier(expr)) {
+              const binding = path.scope.getBinding(expr.name);
+              if (binding && binding.path.isVariableDeclarator()) {
+                const init = binding.path.node.init;
+                if (t.isStringLiteral(init)) {
+                  const iconName = extractIconName(init.value);
+                  if (iconName) {
+                    const normalized = normalizeIconName(iconName);
+                    if (normalized) {
+                      state.iconNames.add(normalized);
+                      debugLog(`Found icon via variable ${expr.name}: ${normalized}`);
+                    }
+                  }
+                }
               }
-            });
-
-            // If we have exactly one icon, we can transform the component
-            if (processedIcons.length === 1) {
-              const { iconIdentifier } = processedIcons[0];
-
-              // Replace name="iconName" with path={iconIdentifier}
-              const pathAttr = t.jsxAttribute(
-                t.jsxIdentifier('path'),
-                t.jsxExpressionContainer(t.identifier(iconIdentifier))
-              );
-
-              // Remove the name attribute and add the path attribute
-              node.openingElement.attributes = node.openingElement.attributes
-                .filter(attr => !(
-                  t.isJSXAttribute(attr) &&
-                  t.isJSXIdentifier(attr.name) &&
-                  attr.name.name === 'name'
-                ))
-                .concat(pathAttr);
-
-              debugLog(`[mdi-auto-import-enhanced] Transformed Icon component: name="${processedIcons[0].iconName}" -> path={${iconIdentifier}}`);
-            } else if (processedIcons.length > 1) {
-              debugLog(`[mdi-auto-import-enhanced] Found multiple possible icons (${processedIcons.length}), adding imports but not transforming component`);
             }
-          } else {
-            debugLog('[mdi-auto-import-enhanced] No icon names found');
           }
-        }
+        });
       },
 
-      /**
-       * Handle JSX attributes with string values for icon props
-       * This handles: <Badge icon="information" />, <Button leftIcon="plus" />
-       */
-      JSXAttribute(path) {
+      // Also check for icon names in object properties (for menu items, list items, etc.)
+      ObjectProperty(path, state) {
         const { node } = path;
 
-        debugLog(`[mdi-auto-import-enhanced] JSXAttribute visitor called for: ${node.name ? node.name.name || 'unknown' : 'no-name'}`);
-
-        // Check if this is an icon-related attribute
-        if (!t.isJSXIdentifier(node.name)) {
-          return;
-        }
-
-        const attrName = node.name.name;
-        const iconPropNames = ['name', 'leftIcon', 'rightIcon', 'icon'];
-
-        if (!iconPropNames.includes(attrName)) {
-          return;
-        }
-
-        // Check if the value is a string literal
-        if (!t.isStringLiteral(node.value)) {
-          return;
-        }
-
-        const stringValue = node.value.value;
-        const iconName = extractIconName(stringValue);
-
-        if (!iconName) {
-          return;
-        }
-
-        // Check if the parent element is a component that supports icons
-        const openingElement = path.parentPath.node;
-        if (!t.isJSXOpeningElement(openingElement) || !t.isJSXIdentifier(openingElement.name)) {
-          return;
-        }
-
-        const componentName = openingElement.name.name;
-        const supportedComponents = ['Icon', 'Button', 'Badge', 'Breadcrumb', 'Menu'];
-
-        if (!supportedComponents.includes(componentName)) {
-          return;
-        }
-
-        try {
-          const mdiIconName = getMdiIconName(iconName);
-          importedIcons.add(mdiIconName);
-          debugLog(`[mdi-auto-import-enhanced] Added icon from ${componentName}.${attrName}="${stringValue}": ${mdiIconName}`);
-        } catch (error) {
-          console.error(`[mdi-auto-import-enhanced] Error processing icon "${iconName}" from ${componentName}.${attrName}: ${error.message}`);
-        }
-      },
+        // Check if this is an icon-related property
+        const iconPropNames = ['icon', 'leftIcon', 'rightIcon', 'leading', 'trailing', 'deleteIcon'];
 
-      /**
-       * Second pass: Transform string literals that are icon-related
-       * This handles cases like: const iconName = "home"; <Icon name={iconName} />
-       */
-      StringLiteral(path) {
-        // Skip if we're already in a JSX attribute (handled above)
-        if (t.isJSXAttribute(path.parent)) {
-          return;
-        }
-
-        const stringValue = path.node.value;
-
-        // Check if this string is icon-related based on context
-        if (isIconRelatedString(path, stringValue)) {
-          const iconName = extractIconName(stringValue);
-          if (iconName) {
-            try {
-              const mdiIconName = getMdiIconName(iconName);
-              importedIcons.add(mdiIconName);
-              debugLog(`[mdi-auto-import-enhanced] Added icon from context-aware string: ${mdiIconName}`);
-            } catch (error) {
-              console.error(`[mdi-auto-import-enhanced] Error processing icon string "${iconName}": ${error.message}`);
+        if (t.isIdentifier(node.key) && iconPropNames.includes(node.key.name)) {
+          if (t.isStringLiteral(node.value)) {
+            const iconName = extractIconName(node.value.value);
+            if (iconName) {
+              const normalized = normalizeIconName(iconName);
+              if (normalized) {
+                state.iconNames.add(normalized);
+                debugLog(`Found icon in object property ${node.key.name}: ${normalized}`);
+              }
             }
           }
         }