Icon Component

The base icon component and icon generation utilities for React Icons

IconBase

The IconBase component is the foundational component that renders all icons in React Icons. It handles context integration, size computation, styling, and SVG rendering.

Usage

import { IconBase, IconBaseProps } from 'react-icons';

function CustomIcon(props: IconBaseProps) {
  return (
    <IconBase attr={{ viewBox: '0 0 24 24' }} {...props}>
      <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" />
    </IconBase>
  );
}

Props

attr · Record<string, string>

Additional SVG attributes to apply to the root SVG element. These are merged with context attributes and other props.

size · string | number

Icon size. Can be a number (interpreted as pixels) or a string with units (e.g., “24px”, “1.5em”). Defaults to “1em” if not specified in props or context.

color · string

Icon color. Accepts any valid CSS color value. If not specified, inherits from the IconContext or uses “currentColor”.

title · string

Accessibility title for the icon. When provided, renders a <title> element inside the SVG for screen readers.

className · string

CSS class name(s) to apply to the SVG element. Merged with className from IconContext if both are present.

style · React.CSSProperties

Inline styles to apply to the SVG element. Merged with style from IconContext, with component props taking precedence.

children · React.ReactNode

Child elements to render inside the SVG. Typically contains <path>, <circle>, or other SVG elements.

All other React.SVGAttributes<SVGElement> are also supported and passed through to the underlying <svg> element.

Implementation Details

The IconBase component:

• Consumes the IconContext to apply global icon configuration
• Merges context values with component props (props take precedence)
• Sets default SVG attributes: stroke="currentColor", fill="currentColor", strokeWidth="0"
• Computes final size from props, context, or defaults to “1em”
• Combines className values from context and props
• Merges style objects with proper precedence (context < props)
• Renders an optional <title> element for accessibility

---

GenIcon

A factory function that generates icon components from icon tree data structures. This is the primary method used internally to create all icon components in React Icons.

Signature

function GenIcon(data: IconTree): (props: IconBaseProps) => React.ReactElement

Parameters

data · IconTree · required

The icon tree structure containing the SVG element definitions.

interface IconTree {
  tag: string;              // SVG element tag name (e.g., "path", "circle")
  attr: { [key: string]: string };  // Element attributes
  child: IconTree[];        // Nested child elements
}

Returns

Returns a React functional component that accepts IconBaseProps and renders the icon.

Usage

import { GenIcon, IconTree } from 'react-icons';

const iconData: IconTree = {
  tag: 'svg',
  attr: { viewBox: '0 0 24 24' },
  child: [
    {
      tag: 'path',
      attr: { d: 'M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z' },
      child: []
    }
  ]
};

// Generate the icon component
const MyShieldIcon = GenIcon(iconData);

// Use the generated component
function App() {
  return <MyShieldIcon size={24} color="blue" />;
}

How It Works

1. Takes an IconTree data structure describing the SVG elements
2. Returns a function component that accepts IconBaseProps
3. The returned component renders an IconBase with the tree structure converted to React elements
4. Recursively processes nested child elements to build the complete SVG structure

Example: Creating a Custom Icon Pack

import { GenIcon, IconBaseProps } from 'react-icons';

// Define your icon data
const icons = {
  MyCustomHome: {
    tag: 'svg',
    attr: { viewBox: '0 0 24 24' },
    child: [
      {
        tag: 'path',
        attr: { d: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z' },
        child: []
      }
    ]
  },
  MyCustomStar: {
    tag: 'svg',
    attr: { viewBox: '0 0 24 24' },
    child: [
      {
        tag: 'path',
        attr: { d: 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' },
        child: []
      }
    ]
  }
};

// Generate components
export const MyCustomHome = GenIcon(icons.MyCustomHome);
export const MyCustomStar = GenIcon(icons.MyCustomStar);

---

Source Reference

For implementation details, see:

• iconBase.tsx:39-81 - IconBase component implementation
• iconBase.tsx:23-29 - GenIcon factory function
• iconBase.tsx:11-22 - Tree2Element helper for recursive rendering