feat(icon-connector): configured icon connector

[mattnolting]

Closes #11620

Update: 4/1/25

There is a file path discrepancy originating for packages/react-core/codeConnect/data/iconsData.json. node-ids change from branch to branch. Ingesting a json file with absolute paths impedes icons linking to the appropriate Figma component.

The actual url and node-id is https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=35322-6764&m=dev

In the next iteration, node-ids and base urls should loaded/saved/configured dynamically to avoid this issue.

Icon Connection System

Overview

This PR introduces a complete icon generation system for PatternFly React, automating the process of creating and maintaining icon components with seamless Figma connections.

Features

• Automated generation of React icon components from configuration
• Figma integration via Code Connect for design system consistency
• Centralized icon metadata management via JSON configuration
• Comprehensive documentation for maintainers and contributors
• Standardized SVG implementation for consistent rendering across the design system

Directory Structure

packages/react-core/
├── codeConnect/
│   ├── README.md               # System documentation
│   ├── config.json             # Global configuration
│   ├── data/
│   │   └── iconsData.json      # Icon metadata
│   ├── scripts/
│   │   ├── README.md           # Script documentation
│   │   ├── iconConnector.mjs   # Figma connection generator
│   │   └── iconGenerator.mjs   # Icon component generator
│   ├── templates/
│   │   └── IconTemplate.txt    # Component template
│   └── utils/
│       ├── config.mjs          # Config utilities
│       ├── iconUtils.mjs       # Icon-specific utilities
│       ├── index.mjs           # Utils exports
│       └── logger.mjs          # Logging system
├── icons/
│   ├── IconProps.ts            # Shared icon props interface
│   ├── IconWrapper.figma.tsx   # Figma-connected wrapper
│   └── generated/              # Generated icon components
└── src/
└── components/
└── Icon/
└── IconWrapper.tsx # Icon wrapper component

Technical Details

• Added configuration and script infrastructure for icon generation pipeline
• Implemented templating system with consistent component structure patterns
• Created IconWrapper component for unified sizing and styling
• Generated 170+ icon components with standardized props and SVG patterns
• Added npm scripts for streamlined generation workflow

Usage

Developers can run the following commands:

npm run figma:icons:generate   # Generate icon components
npm run figma:icons:connect    # Create Figma connections
npm run figma:icons            # Run both commands in sequence
Implementation Notes

Each icon follows PatternFly design standards with 24x24 viewBox
Components include accessibility support (title props)
SVG paths currently use placeholder content (circular shape)
System supports additional attributes via props spreading
Icon sizing follows the PatternFly design token system

Testing
All generated components follow the standardized pattern and have been verified to:

Import dependencies correctly
Export named components with proper TypeScript interfaces
Render SVG content with accessibility considerations
Match design system specifications for viewBox and other attributes

[patternfly-build]

Preview: https://patternfly-react-pr-11693.surge.sh

A11y report: https://patternfly-react-pr-11693-a11y.surge.sh