0
# Context Configuration
1

2
Global configuration system using React Context API for setting default icon properties across your application. This allows you to configure icon appearance once and have it apply to all child icons.
3

4
## Capabilities
5

6
### IconContext Provider
7

8
React Context provider for configuring default icon properties.
9

10
```typescript { .api }
11
/**
12
 * React Context for providing icon configuration to child components
13
 */
14
const IconContext: React.Context<IconContext>;
15

16
interface IconContext {
17
  /** Default color for all icons (e.g., "red", "#ff0000", "currentColor") */
18
  color?: string;
19
  /** Default size for all icons (e.g., "1em", "24px", "1.5rem") */
20
  size?: string;
21
  /** Default CSS class names to apply to all icons */
22
  className?: string;
23
  /** Default inline styles object for all icons */
24
  style?: React.CSSProperties;
25
  /** Default SVG attributes to apply to all icons */
26
  attr?: React.SVGAttributes<SVGElement>;
27
}
28
```
29

30
**Usage Examples:**
31

32
```typescript
33
import React from "react";
34
import { IconContext } from "react-icons";
35
import { FaBeer, FaHome, FaUser } from "react-icons/fa";
36

37
// Basic context configuration
38
function App() {
39
  return (
40
    <IconContext.Provider value={{ color: "blue", size: "1.5em" }}>
41
      <div>
42
        <FaBeer />   {/* Will be blue and 1.5em */}
43
        <FaHome />   {/* Will be blue and 1.5em */}
44
        <FaUser />   {/* Will be blue and 1.5em */}
45
      </div>
46
    </IconContext.Provider>
47
  );
48
}
49

50
// Advanced context configuration
51
function StyledApp() {
52
  return (
53
    <IconContext.Provider 
54
      value={{ 
55
        color: "#333",
56
        size: "20px",
57
        className: "app-icon",
58
        style: { marginRight: "8px" },
59
        attr: { "aria-hidden": "true" }
60
      }}
61
    >
62
      <div>
63
        <FaBeer title="Beer" />  {/* Inherits all context styles */}
64
        <FaHome color="red" />   {/* Overrides color to red */}
65
      </div>
66
    </IconContext.Provider>
67
  );
68
}
69
```
70

71
### DefaultContext
72

73
Default context configuration used when no IconContext.Provider is present.
74

75
```typescript { .api }
76
/**
77
 * Default context configuration with all properties explicitly set to undefined
78
 * Used as fallback when no context provider is present
79
 */
80
const DefaultContext: IconContext = {
81
  color: undefined,
82
  size: undefined,
83
  className: undefined,
84
  style: undefined,
85
  attr: undefined,
86
};
87
```
88

89
### Context Inheritance and Overrides
90

91
Icons inherit context values but can override them with direct props:
92

93
```typescript
94
import { IconContext } from "react-icons";
95
import { FaBeer, FaHome } from "react-icons/fa";
96

97
function ContextExample() {
98
  return (
99
    <IconContext.Provider value={{ color: "blue", size: "24px" }}>
100
      <div>
101
        {/* Uses context: blue color, 24px size */}
102
        <FaBeer />
103
        
104
        {/* Overrides color but keeps context size */}
105
        <FaHome color="red" />
106
        
107
        {/* Overrides both color and size */}
108
        <FaBeer color="green" size="32px" />
109
        
110
        {/* Nested context - inner context takes precedence */}
111
        <IconContext.Provider value={{ color: "purple" }}>
112
          <FaHome />  {/* Purple color, 24px size (inherited from outer) */}
113
        </IconContext.Provider>
114
      </div>
115
    </IconContext.Provider>
116
  );
117
}
118
```
119

120
## Advanced Usage
121

122
### Conditional Context
123

124
```typescript
125
import { IconContext } from "react-icons";
126
import { FaBeer } from "react-icons/fa";
127

128
function ThemeAwareIcons({ darkMode }) {
129
  const contextValue = {
130
    color: darkMode ? "#ffffff" : "#000000",
131
    size: "18px",
132
    className: darkMode ? "icon-dark" : "icon-light"
133
  };
134

135
  return (
136
    <IconContext.Provider value={contextValue}>
137
      <div>
138
        <FaBeer />
139
        {/* Icons automatically adapt to theme */}
140
      </div>
141
    </IconContext.Provider>
142
  );
143
}
144
```
145

146
### Multiple Context Configurations
147

148
```typescript
149
import { IconContext } from "react-icons";
150
import { FaBeer, FaHome, FaUser } from "react-icons/fa";
151

152
function MultiContextApp() {
153
  return (
154
    <div>
155
      {/* Navigation icons */}
156
      <IconContext.Provider value={{ size: "20px", color: "#666" }}>
157
        <nav>
158
          <FaHome />
159
          <FaUser />
160
        </nav>
161
      </IconContext.Provider>
162

163
      {/* Content icons */}
164
      <IconContext.Provider value={{ size: "16px", color: "#333" }}>
165
        <main>
166
          <FaBeer />
167
        </main>
168
      </IconContext.Provider>
169
    </div>
170
  );
171
}
172
```
173

174
### CSS-in-JS Integration
175

176
```typescript
177
import styled from "styled-components";
178
import { IconContext } from "react-icons";
179
import { FaBeer } from "react-icons/fa";
180

181
const StyledIconProvider = styled(IconContext.Provider)`
182
  .custom-icon {
183
    transition: color 0.2s ease;
184
    
185
    &:hover {
186
      color: #ff6b6b;
187
    }
188
  }
189
`;
190

191
function StyledIcons() {
192
  return (
193
    <StyledIconProvider value={{ className: "custom-icon", size: "24px" }}>
194
      <FaBeer />
195
    </StyledIconProvider>
196
  );
197
}
198
```
199

200
### Context with Custom Attributes
201

202
```typescript
203
import { IconContext } from "react-icons";
204
import { FaBeer, FaHome } from "react-icons/fa";
205

206
function AccessibleIcons() {
207
  return (
208
    <IconContext.Provider 
209
      value={{
210
        attr: {
211
          "aria-hidden": "true",
212
          "focusable": "false",
213
          "role": "img"
214
        },
215
        size: "20px"
216
      }}
217
    >
218
      <div>
219
        <FaBeer title="Beer icon" />  {/* Combines context attrs with title */}
220
        <FaHome />                    {/* Uses context attrs */}
221
      </div>
222
    </IconContext.Provider>
223
  );
224
}
225
```
226

227
## Performance Considerations
228

229
### Context Re-renders
230

231
```typescript
232
import React, { useMemo } from "react";
233
import { IconContext } from "react-icons";
234

235
function OptimizedIconProvider({ children, theme }) {
236
  // Memoize context value to prevent unnecessary re-renders
237
  const contextValue = useMemo(() => ({
238
    color: theme.iconColor,
239
    size: theme.iconSize,
240
    className: theme.iconClass
241
  }), [theme.iconColor, theme.iconSize, theme.iconClass]);
242

243
  return (
244
    <IconContext.Provider value={contextValue}>
245
      {children}
246
    </IconContext.Provider>
247
  );
248
}
249
```
250

251
### Best Practices
252

253
- Use context at the highest practical level in your component tree
254
- Memoize context values to prevent unnecessary re-renders
255
- Prefer context for global settings, direct props for specific overrides
256
- Combine context with CSS classes for flexible styling
257
- Use nested contexts sparingly to avoid complexity