0
# Icon Factory
1
2
The icon factory system provides the `createIcon` function for generating custom icon components that match the library's patterns and behavior. This enables creation of custom icons with the same accessibility features, styling, and component structure as built-in icons.
3
4
## Capabilities
5
6
### createIcon Function
7
8
Factory function that creates React class components from icon definitions.
9
10
```typescript { .api }
11
/**
12
* Factory function to create Icon class components
13
* @param iconDefinition - Configuration object defining the icon's properties
14
* @returns React class component that renders an SVG icon
15
*/
16
function createIcon(iconDefinition: IconDefinition): React.ComponentClass<SVGIconProps>;
17
18
interface IconDefinition {
19
/** Display name for the icon component (used for React DevTools) */
20
name?: string;
21
/** Icon width in pixels */
22
width: number;
23
/** Icon height in pixels */
24
height: number;
25
/** SVG path data or array of path objects for multi-path icons */
26
svgPath: string | SVGPathObject[];
27
/** X-axis offset for viewBox (default: 0) */
28
xOffset?: number;
29
/** Y-axis offset for viewBox (default: 0) */
30
yOffset?: number;
31
/** CSS class to apply to the SVG element */
32
svgClassName?: string;
33
}
34
35
interface SVGPathObject {
36
/** SVG path data string */
37
path: string;
38
/** CSS class for this specific path element */
39
className?: string;
40
}
41
```
42
43
### Basic Icon Creation
44
45
Create simple icons using a single SVG path string.
46
47
**Usage Example:**
48
49
```typescript
50
import { createIcon, IconDefinition, SVGIconProps } from "@patternfly/react-icons/dist/esm/createIcon";
51
52
// Define a simple star icon
53
const starIconDef: IconDefinition = {
54
name: 'StarIcon',
55
width: 24,
56
height: 24,
57
svgPath: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'
58
};
59
60
// Create the icon component
61
const StarIcon = createIcon(starIconDef);
62
63
// Use the icon
64
function MyComponent() {
65
return (
66
<div>
67
<StarIcon title="Favorite item" />
68
<StarIcon className="text-yellow-500" />
69
</div>
70
);
71
}
72
```
73
74
### Multi-Path Icons
75
76
Create complex icons with multiple path elements, each with optional individual styling.
77
78
```typescript { .api }
79
/**
80
* Multi-path icon definition using SVGPathObject array
81
*/
82
interface MultiPathIconDefinition extends IconDefinition {
83
svgPath: SVGPathObject[];
84
}
85
```
86
87
**Usage Example:**
88
89
```typescript
90
import { createIcon, SVGPathObject } from "@patternfly/react-icons/dist/esm/createIcon";
91
92
// Define a complex shield icon with multiple paths
93
const shieldIconDef = {
94
name: 'ShieldIcon',
95
width: 24,
96
height: 24,
97
svgPath: [
98
{
99
path: 'M12 2L2 7v10c0 5.55 3.84 9.71 9 9.71s9-4.16 9-9.71V7l-10-5z',
100
className: 'shield-background'
101
},
102
{
103
path: 'M12 7L8.5 10.5L12 14l7-7-2.5-2.5L12 7z',
104
className: 'shield-check'
105
}
106
],
107
svgClassName: 'complex-shield'
108
};
109
110
const ShieldIcon = createIcon(shieldIconDef);
111
```
112
113
### Icon with Offsets
114
115
Create icons that require viewport adjustments using offset parameters.
116
117
**Usage Example:**
118
119
```typescript
120
const customIconDef = {
121
name: 'CustomIcon',
122
width: 100,
123
height: 100,
124
xOffset: 20, // Shifts viewBox 20 units right
125
yOffset: 10, // Shifts viewBox 10 units down
126
svgPath: 'M50 10 L90 90 L10 90 Z', // Triangle
127
svgClassName: 'custom-triangle'
128
};
129
130
const CustomIcon = createIcon(customIconDef);
131
132
// Results in viewBox="20 10 100 100"
133
```
134
135
### Generated Component Structure
136
137
The `createIcon` function generates React class components with consistent structure and behavior.
138
139
```typescript { .api }
140
/**
141
* Structure of components created by createIcon
142
*/
143
interface CreatedIconComponent extends React.ComponentClass<SVGIconProps> {
144
/** Static display name from IconDefinition.name */
145
displayName: string;
146
147
/** Component renders SVG with these features */
148
render(): React.ReactElement<{
149
className: string; // 'pf-v6-svg' + svgClassName + props.className
150
viewBox: string; // Calculated from xOffset, yOffset, width, height
151
fill: 'currentColor'; // Inherits text color
152
'aria-labelledby': string | null; // Links to title element if title provided
153
'aria-hidden': boolean | null; // true when no title provided
154
role: 'img'; // Semantic role
155
width: '1em'; // Scales with font size
156
height: '1em'; // Scales with font size
157
}>;
158
}
159
```
160
161
### Component Behavior
162
163
Created icon components behave identically to built-in icons with full feature parity.
164
165
**Accessibility Features:**
166
- Automatic ARIA attribute management
167
- Title element generation with unique IDs
168
- Proper semantic roles and labeling
169
170
**Styling Integration:**
171
- Inherits `pf-v6-svg` base class
172
- Applies custom `svgClassName` if provided
173
- Accepts additional classes via `className` prop
174
- Scales with font size using `1em` dimensions
175
176
**Event Handling:**
177
- Supports all standard SVG element events
178
- Proper event delegation and handling
179
- Compatible with React synthetic events
180
181
**Usage Examples:**
182
183
```typescript
184
// Created icons work exactly like built-in icons
185
const MyIcon = createIcon({
186
name: 'MyIcon',
187
width: 16,
188
height: 16,
189
svgPath: 'M8 0L16 8L8 16L0 8Z'
190
});
191
192
// All standard usage patterns work
193
<MyIcon />
194
<MyIcon title="My custom icon" />
195
<MyIcon className="custom-style" onClick={handleClick} />
196
<MyIcon style={{ color: 'red', fontSize: '24px' }} />
197
```
198
199
### TypeScript Integration
200
201
Full TypeScript support with proper type inference and safety.
202
203
```typescript { .api }
204
/**
205
* Type definitions for createIcon usage
206
*/
207
declare function createIcon<T extends IconDefinition>(
208
iconDefinition: T
209
): React.ComponentClass<SVGIconProps>;
210
211
// Type-safe icon definition
212
const typedIconDef: IconDefinition = {
213
name: 'TypedIcon',
214
width: 24,
215
height: 24,
216
svgPath: 'M12 2L22 12L12 22L2 12Z'
217
};
218
219
// Resulting component has full type safety
220
const TypedIcon: React.ComponentClass<SVGIconProps> = createIcon(typedIconDef);
221
```
222
223
### Best Practices
224
225
**Naming Conventions:**
226
- Use descriptive names: `EmailIcon`, `CalendarIcon`
227
- Follow PascalCase with "Icon" suffix
228
- Avoid generic names: prefer `SendIcon` over `ArrowIcon`
229
230
**SVG Path Optimization:**
231
- Use optimized path data for better performance
232
- Minimize path complexity when possible
233
- Consider using SVG optimization tools
234
235
**Accessibility:**
236
- Always provide meaningful `name` values
237
- Design icons to work at `1em` size (typically 16px)
238
- Ensure sufficient contrast and clarity
239
240
**Performance:**
241
- Create components outside render functions
242
- Consider memoization for dynamic icon creation
243
- Reuse icon definitions when possible
244
245
```typescript
246
// Good: Create once, reuse
247
const IconComponent = createIcon(iconDef);
248
249
function MyComponent() {
250
return <IconComponent />;
251
}
252
253
// Avoid: Creating in render
254
function MyComponent() {
255
return <>{createIcon(iconDef)}</>; // Creates new component on every render
256
}
257
```