0
# Core Components
1

2
Core infrastructure components for rendering and configuring SVG icons. These components provide the foundation for all icon rendering in React Icons.
3

4
## Capabilities
5

6
### IconBase Component
7

8
The base component for rendering SVG icons with context support and customizable properties.
9

10
```typescript { .api }
11
/**
12
 * Base component for rendering SVG icons with context support
13
 * @param props - Icon properties including size, color, and SVG attributes
14
 * @returns JSX.Element representing the SVG icon
15
 */
16
function IconBase(
17
  props: IconBaseProps & { attr?: Record<string, string> }
18
): JSX.Element;
19

20
interface IconBaseProps extends React.SVGAttributes<SVGElement> {
21
  /** Child React elements to render inside the SVG */
22
  children?: React.ReactNode;
23
  /** Icon size override (e.g., "24px", "1.5em", 24) */
24
  size?: string | number;
25
  /** Icon color override (e.g., "red", "#ff0000", "currentColor") */
26
  color?: string;
27
  /** Accessibility title for screen readers */
28
  title?: string;
29
}
30
```
31

32
**Usage Examples:**
33

34
```typescript
35
import { IconBase } from "react-icons";
36

37
// Basic usage with custom attributes
38
<IconBase size="24px" color="blue" title="Custom icon">
39
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
40
</IconBase>
41

42
// With custom SVG attributes
43
<IconBase 
44
  viewBox="0 0 24 24" 
45
  strokeWidth="2"
46
  style={{ border: "1px solid gray" }}
47
>
48
  <circle cx="12" cy="12" r="10"/>
49
</IconBase>
50
```
51

52
### IconType Type
53

54
Function type definition for all icon components in the library.
55

56
```typescript { .api }
57
/**
58
 * Function type for icon components
59
 * @param props - Icon base properties
60
 * @returns React node representing the icon
61
 */
62
type IconType = (props: IconBaseProps) => React.ReactNode;
63
```
64

65
### GenIcon Function
66

67
Utility function that generates icon components from IconTree data structures.
68

69
```typescript { .api }
70
/**
71
 * Generates icon component from IconTree data
72
 * @param data - IconTree structure containing SVG element data
73
 * @returns Function that renders the icon component
74
 */
75
function GenIcon(data: IconTree): (props: IconBaseProps) => JSX.Element;
76

77
interface IconTree {
78
  /** SVG element tag name (e.g., "svg", "path", "circle") */
79
  tag: string;
80
  /** Element attributes as key-value pairs */
81
  attr: { [key: string]: string };
82
  /** Array of child IconTree elements */
83
  child: IconTree[];
84
}
85
```
86

87
**Usage Examples:**
88

89
```typescript
90
import { GenIcon } from "react-icons";
91

92
// Create a custom icon component from SVG path data
93
const CustomIcon = GenIcon({
94
  tag: "svg",
95
  attr: { viewBox: "0 0 24 24" },
96
  child: [
97
    {
98
      tag: "path",
99
      attr: { d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" },
100
      child: []
101
    }
102
  ]
103
});
104

105
// Use the generated icon (supports all IconBase props)
106
<CustomIcon size="32px" color="green" title="Custom House Icon" />
107

108
// Complex multi-element icon
109
const ComplexIcon = GenIcon({
110
  tag: "svg",
111
  attr: { viewBox: "0 0 24 24", fill: "currentColor" },
112
  child: [
113
    {
114
      tag: "circle",
115
      attr: { cx: "12", cy: "12", r: "10", fill: "none", stroke: "currentColor", strokeWidth: "2" },
116
      child: []
117
    },
118
    {
119
      tag: "path",
120
      attr: { d: "M9 12l2 2 4-4" },
121
      child: []
122
    }
123
  ]
124
});
125
```
126

127
## Advanced Usage
128

129
### Custom Icon Creation
130

131
```typescript
132
import { IconBase, GenIcon } from "react-icons";
133

134
// Method 1: Direct IconBase usage
135
const DirectIcon = (props) => (
136
  <IconBase {...props}>
137
    <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"/>
138
  </IconBase>
139
);
140

141
// Method 2: Using GenIcon
142
const GeneratedIcon = GenIcon({
143
  tag: "svg",
144
  attr: { viewBox: "0 0 24 24" },
145
  child: [{
146
    tag: "path",
147
    attr: { d: "M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" },
148
    child: []
149
  }]
150
});
151
```
152

153
### Error Handling
154

155
Icons gracefully handle missing context by falling back to DefaultContext. Invalid props are handled by React's standard SVG attribute validation.
156

157
```typescript
158
// Icons work without context
159
<FaBeer size="24px" /> // Uses default context values
160

161
// Invalid props are filtered by React
162
<FaBeer invalidProp="value" size="24px" /> // invalidProp is ignored
163
```