feat(icon-connector): configured icon connector

packages/react-core/.gitignore

@@ -2,4 +2,8 @@
 /deprecated
 /components
 /layouts
-/helpers
+/helpers
+yarn.lock
+
+# Environment variables
+.env

packages/react-core/codeConnect/.gitignore

@@ -0,0 +1,18 @@
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.DS_STORE
+
+# Whether you use PnP or not, the node_modules folder is often used to store
+# build artifacts that should be gitignored
+node_modules
+
+# Swap the comments on the following lines if you wish to use zero-installs
+# In that case, don't forget to run `yarn config set enableGlobalCache false`!
+# Documentation here: https://yarnpkg.com/features/caching#zero-installs
+
+#!.yarn/cache
+.pnp.*

packages/react-core/codeConnect/README.md

@@ -0,0 +1,105 @@
+# PatternFly React Icon Generation System
+
+## Overview
+
+The PatternFly React icon generation system automates the process of creating and managing icon components, including generation, Figma connections, and consistent integration.
+
+## Components
+
+### 1. Icon Data Source (`iconsData.json`)
+Defines the metadata for each icon in the library.
+
+```npm run figma:icons:fetch FIGMA_ACCESS_TOKEN```
+
+#### JSON Structure
+```json
+[
+  {
+    "iconName": "angle-down",
+    "fileName": "angle-down-icon",
+    "reactName": "AngleDownIcon",
+    "url": "Optional Figma design URL",
+    "svgPath": "SVG path data for the icon"
+  }
+]
+```
+
+### 2. Configuration (`config.json`)
+Manages global settings for icon generation.
+
+#### Configuration Options
+- `figmaBaseUrl`: Base URL for Figma design references
+- `defaultNodeId`: Fallback Figma node identifier
+
+### 3. Icon Template (`iconTemplate.txt`)
+Provides a consistent template for generating individual icon components.
+
+### 4. Scripts
+
+#### `iconConnector.mjs`
+Generates Figma connection files for icons.
+
+## Workflow
+
+### 1. Prepare Icon Data
+Create or update `iconsData.json` with icon specifications.
+
+### 2. Configuration
+Customize `config.json` with project-specific settings.
+
+### 3. Generation Commands
+
+#### Generate Icons
+```bash
+# Generate icon components and Figma connections
+npm run figma:icons
+```
+
+## Best Practices
+
+- Keep `iconsData.json` updated with the latest icon information
+- Ensure SVG paths are clean and optimized
+- Maintain consistent naming conventions
+- Validate icon designs in Figma before generation
+
+## Troubleshooting
+
+### Common Issues
+- **Missing Configuration**: Verify `config.json` exists and is correctly formatted
+- **SVG Path Errors**: Check SVG path syntax and completeness
+- **Naming Conflicts**: Ensure unique `reactName` for each icon
+
+### Logging
+The system uses a comprehensive logging utility that provides:
+- Timestamped logs
+- Contextual information
+- Color-coded output for different log levels
+
+## Extensibility
+
+The modular design allows easy extension:
+- Add new icons by updating `iconsData.json`
+- Customize icon templates
+- Modify configuration as project needs evolve
+
+## Contributing
+
+1. Update `iconsData.json` with new icon specifications
+2. Validate SVG paths and icon designs
+3. Run generation scripts
+4. Review generated components
+5. Commit changes
+
+## Dependencies
+
+- Node.js
+- Figma Code Connect
+- PatternFly React ecosystem
+
+## License
+
+[Insert appropriate license information]
+
+## Support
+
+For issues or questions, please file a GitHub issue in the PatternFly React repository.

packages/react-core/codeConnect/icons/IconProps.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Additional classes added to the icon */
+  className?: string;
+  /** Icon title for accessibility */
+  title?: string;
+}

packages/react-core/codeConnect/icons/IconWrapper.figma.tsx

@@ -0,0 +1,58 @@
+import { IconWrapper } from 'src/components/Icon/IconWrapper.tsx';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  IconWrapper,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/9QzcMKMR7FX7HXlc0sRUSp/PatternFly-6--Components?node-id=198-1573&t=dP3Et2mI3FtI6IEP-11',
+  {
+    props: {
+      // Icon instance from Figma
+      icon: figma.instance('🖼️ Icon'),
+
+      // Comprehensive icon size mapping
+      iconSize: figma.enum('Icon Size', {
+        // Standalone Sizes
+        'Standalone - Small': 'sm',
+        'Standalone - Medium': 'md',
+        'Standalone - Large': 'lg',
+        'Standalone - XL': 'xl',
+        'Standalone - 2XL': '2xl',
+        'Standalone - 3XL': '3xl',
+
+        // Body Sizes
+        'Body - Small': 'body---small',
+        'Body - Default': 'body---default',
+        'Body - Large': 'body---large',
+
+        // Heading Sizes
+        'Heading - H1': 'heading---h1',
+        'Heading - H2': 'heading---h2',
+        'Heading - H3': 'heading---h3',
+        'Heading - H4': 'heading---h4',
+        'Heading - H5': 'heading---h5',
+        'Heading - H6': 'heading---h6',
+
+        // Font Sizes
+        'Font size - XS': 'font-size---xs',
+        'Font size - Sm': 'font-size---sm',
+        'Font size - Med': 'font-size---med',
+        'Font size - Lg': 'font-size---lg',
+        'Font size - XL': 'font-size---xl',
+        'Font size - 2XL': 'font-size---2xl',
+        'Font size - 3XL': 'font-size---3xl',
+        'Font size - 4XL': 'font-size---4xl'
+      })
+
+      // // Add state support
+      // states: figma.string('State', {
+      //   default: '',
+      //   empty: 'pf-m-empty'
+      // })
+    },
+
+    // example: (props) => <IconWrapper iconSize={props.iconSize} icon={props.icon} className={props.states} />
+    example: (props) => <IconWrapper iconSize={props.iconSize} icon={props.icon} />
+  }
+);
+
+export default IconWrapper;