IconContext

Type definition for the icon configuration context

Type Definition

interface IconContext {
  color?: string;
  size?: string;
  className?: string;
  style?: React.CSSProperties;
  attr?: React.SVGAttributes<SVGElement>;
}

Overview

The IconContext interface defines the shape of the configuration object that can be provided to the IconContext.Provider. It allows you to set default values for icon properties that will be inherited by all icons within the provider’s component subtree.

Properties

color · string

Default color for all icons in the context.

Accepted Values:

• Hex colors: "#3b82f6"
• RGB/RGBA: "rgb(59, 130, 246)", "rgba(59, 130, 246, 0.5)"
• Named colors: "blue", "red", "currentColor"
• HSL: "hsl(217, 91%, 60%)"

Default: undefined (icons use “currentColor”)

Behavior: Individual icon color props override this value.

Example:

<IconContext.Provider value={{ color: '#3b82f6' }}>
  <FaIcon /> {/* Blue */}
  <FaIcon color="red" /> {/* Red - overrides context */}
</IconContext.Provider>

size · string

Default size for all icons in the context.

Accepted Values:

• Any valid CSS size unit: "24px", "1.5em", "2rem", "100%"

Default: undefined (icons use “1em”)

Note: Unlike IconBaseProps.size, this only accepts strings, not numbers.

Behavior: Individual icon size props override this value.

Example:

<IconContext.Provider value={{ size: '2em' }}>
  <FaIcon /> {/* 2em */}
  <FaIcon size="3em" /> {/* 3em - overrides context */}
</IconContext.Provider>

className · string

CSS class name(s) to apply to all icons in the context.

Default: undefined

Behavior: Merged with individual icon className props. Both context and icon classes are applied.

Merge Logic:

finalClassName = contextClassName + " " + iconClassName

Example:

<IconContext.Provider value={{ className: 'icon-base' }}>
  <FaIcon /> {/* class="icon-base" */}
  <FaIcon className="icon-special" /> {/* class="icon-base icon-special" */}
</IconContext.Provider>

style · React.CSSProperties

Inline styles to apply to all icons in the context.

Type: Standard React CSS properties object

Default: undefined

Behavior: Merged with individual icon style props. Icon styles override context styles for the same property.

Merge Precedence:

1. Context styles (lowest priority)
2. Icon color prop (applied to style.color)
3. Icon style prop (highest priority)

Example:

<IconContext.Provider value={{ 
  style: { 
    verticalAlign: 'middle',
    marginRight: '8px',
    opacity: 0.8
  } 
}}>
  <FaIcon /> 
  {/* style: verticalAlign: middle, marginRight: 8px, opacity: 0.8 */}
  
  <FaIcon style={{ opacity: 1 }} />
  {/* style: verticalAlign: middle, marginRight: 8px, opacity: 1 */}
</IconContext.Provider>

attr · React.SVGAttributes<SVGElement>

Additional SVG attributes to apply to all icons in the context.

Accepted Attributes:

• viewBox, preserveAspectRatio
• strokeLinecap, strokeLinejoin, strokeWidth
• fill, fillRule, fillOpacity
• stroke, strokeOpacity, strokeDasharray
• Any other valid SVG attributes

Default: undefined

Behavior: Merged with icon-specific attributes. Merge order:

1. Context attr (lowest priority)
2. Icon attr prop (if using IconBase)
3. Other icon props (highest priority)

Example:

<IconContext.Provider value={{ 
  attr: { 
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    strokeWidth: '2'
  } 
}}>
  <FaIcon /> {/* Rounded strokes, width 2 */}
</IconContext.Provider>

Default Values

When no IconContext.Provider is present, or when a property is not specified in the context value, icons use these defaults:

const DefaultContext: IconContext = {
  color: undefined,      // Icons use "currentColor"
  size: undefined,       // Icons default to "1em"
  className: undefined,  // No default classes
  style: undefined,      // No default styles
  attr: undefined,       // No default attributes
};

Usage Examples

Basic Configuration

import { IconContext } from 'react-icons';
import { FaBeer, FaCoffee } from 'react-icons/fa';

function App() {
  const iconConfig: IconContext = {
    color: 'blue',
    size: '1.5em'
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      <FaBeer />
      <FaCoffee />
    </IconContext.Provider>
  );
}

Theme Integration

import { IconContext } from 'react-icons';

function ThemedApp() {
  const theme = useTheme();
  
  const iconConfig: IconContext = {
    color: theme.colors.primary,
    size: '1.25rem',
    style: {
      verticalAlign: 'middle',
      marginRight: theme.spacing.sm
    },
    className: theme.iconClass
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      <YourApp />
    </IconContext.Provider>
  );
}

Accessibility Configuration

import { IconContext } from 'react-icons';

function AccessibleIcons({ children }) {
  const iconConfig: IconContext = {
    attr: {
      'aria-hidden': 'true',
      focusable: 'false'
    } as React.SVGAttributes<SVGElement>
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      {children}
    </IconContext.Provider>
  );
}

Stroke Customization

import { IconContext } from 'react-icons';
import { FiHome, FiUser } from 'react-icons/fi';

function OutlineIcons() {
  const iconConfig: IconContext = {
    attr: {
      strokeWidth: '1.5',
      strokeLinecap: 'round',
      strokeLinejoin: 'round'
    } as React.SVGAttributes<SVGElement>,
    size: '24px'
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      <FiHome />
      <FiUser />
    </IconContext.Provider>
  );
}

Responsive Sizing

import { IconContext } from 'react-icons';

function ResponsiveIcons({ children }) {
  const iconConfig: IconContext = {
    style: {
      fontSize: 'clamp(1rem, 2vw, 2rem)',
      transition: 'font-size 0.2s ease'
    }
  };
  
  return (
    <IconContext.Provider value={iconConfig}>
      {children}
    </IconContext.Provider>
  );
}

Nested Contexts

import { IconContext } from 'react-icons';

function App() {
  const globalConfig: IconContext = {
    color: 'gray',
    size: '1em'
  };
  
  const headerConfig: IconContext = {
    color: 'white',
    size: '1.5em',
    style: { marginRight: '12px' }
  };
  
  return (
    <IconContext.Provider value={globalConfig}>
      <div>
        <IconContext.Provider value={headerConfig}>
          <Header /> {/* Icons use headerConfig */}
        </IconContext.Provider>
        
        <Main /> {/* Icons use globalConfig */}
      </div>
    </IconContext.Provider>
  );
}

Type Usage in TypeScript

Typing Context Configuration

import { IconContext } from 'react-icons';

const lightThemeIcons: IconContext = {
  color: '#1f2937',
  size: '1.25rem'
};

const darkThemeIcons: IconContext = {
  color: '#f9fafb',
  size: '1.25rem',
  style: { filter: 'drop-shadow(0 0 2px rgba(255,255,255,0.5))' }
};

Helper Function

import { IconContext } from 'react-icons';

function createIconConfig(
  color: string,
  size: string,
  options?: Partial<IconContext>
): IconContext {
  return {
    color,
    size,
    ...options
  };
}

const config = createIconConfig('#3b82f6', '1.5em', {
  style: { marginRight: '8px' }
});

Component Props

import { IconContext } from 'react-icons';
import { ReactNode } from 'react';

interface IconProviderProps {
  children: ReactNode;
  config: IconContext;
}

function IconProvider({ children, config }: IconProviderProps) {
  return (
    <IconContext.Provider value={config}>
      {children}
    </IconContext.Provider>
  );
}

Merge Behavior

Understanding how context values merge with icon props:

Property	Merge Strategy	Example
color	Icon prop overrides context	Context: blue, Icon: red → red
size	Icon prop overrides context	Context: 2em, Icon: 3em → 3em
className	Concatenated (context + icon)	Context: “base”, Icon: “special” → “base special”
style	Merged (icon overrides on conflict)	Context: {opacity: 0.8}, Icon: {opacity: 1} → {opacity: 1}
attr	Merged (icon overrides on conflict)	Context: {strokeWidth: "2"}, Icon: {strokeWidth: "3"} → {strokeWidth: "3"}

Source Reference

The IconContext interface is defined in:

• iconContext.tsx:3-9 - Interface definition
• iconContext.tsx:11-17 - DefaultContext constant
• iconContext.tsx:19-20 - Context creation

export interface IconContext {
  color?: string;
  size?: string;
  className?: string;
  style?: React.CSSProperties;
  attr?: React.SVGAttributes<SVGElement>;
}