feat(CC-icons): added support scripts

Author: mattnolting

packages/react-core/.gitignore

@@ -2,4 +2,5 @@
 /deprecated
 /components
 /layouts
-/helpers
+/helpers
+.env

packages/react-core/codeConnect/README.md

@@ -0,0 +1,93 @@
+# 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. Scripts
+
+#### `iconConnector.mjs`
+Generates Figma connection files for icons.
+
+## Workflow
+
+### 1. Prepare Icon Data
+Create or update `iconsData.json` with icon specifications.
+
+### 2. Generation Commands
+
+#### Generate Icons
+```bash
+# Generate iconData.json
+yarn run figma:fetch
+
+# Generate icon components and Figma connections
+yarn run figma:sync
+```
+
+## 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
+- **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`
+- 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
+
+PatternFly React is licensed under the [MIT License](https://github.com/patternfly/patternfly-react/tree/main/LICENSE).
+
+## Support
+
+For issues or questions, please file a GitHub issue in the PatternFly React repository.

packages/react-core/codeConnect/data/iconsData.json

@@ -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/IconProps.ts

@@ -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;