React Icon Base Component

2.1.2 · abandoned · verified Tue Apr 21

react-icon-base is a foundational React component designed to provide a consistent base for rendering SVG icons, primarily intended for internal use by icon libraries, such as older iterations of `react-icons`. It encapsulates an SVG element, allowing for a custom `viewBox` and direct SVG children, while also facilitating consistent styling, sizing, and color propagation via React's now-legacy context API (`childContextTypes`). The package's current stable version is 2.1.2, with its last publish occurring over seven years ago. Its deep reliance on `React.Component` and the deprecated `childContextTypes` API renders it largely incompatible with modern React versions (16.3+ for new context API, 18+ for complete removal of legacy context) without substantial compatibility layers or downgrading the React version. It is no longer actively maintained and should be considered abandoned for new project development.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'contextTypes')
```
cause This error occurs when a component attempts to access `contextTypes` (or `childContextTypes`) which has been deprecated and effectively removed in newer React versions. This package relies on it.

fix This package is not compatible with React 18+. To fix, downgrade your React version to <16.3, or, preferably, replace `react-icon-base` with a modern, actively maintained icon solution.
```
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `YourParentComponent`.
```
cause This typically means `IconBase` was not correctly imported or resolved, resulting in `undefined` or an incorrect object being passed as a component to React's renderer. Often happens with incorrect default vs. named imports or CommonJS/ESM interop issues.

fix Ensure you are using `import IconBase from 'react-icon-base';` as it is a default export. Verify your build system correctly transpiles/resolves CommonJS modules if you are in an ES Module environment.

Warnings

breaking The package heavily relies on React's legacy Context API (`childContextTypes`, `getChildContext`), which was deprecated in React 16.3 and entirely removed in React 18. Using this package with modern React versions will cause runtime errors or require significant polyfills/workarounds.
Fix: For new projects or existing projects upgrading to React 16.3+, it is strongly recommended to use a modern icon library (e.g., `react-icons` v3+, which no longer uses this base package) that leverages the new Context API or passes props directly. If forced to use, consider a React compatibility layer like `@legacy-react/context-api` (if available and maintained) or pin React to a version below 16.3.
breaking This package is no longer maintained. Its last publish was over seven years ago. This means there will be no new features, bug fixes, security updates, or compatibility patches for newer React versions or JavaScript ecosystems.
Fix: Migrate to a currently maintained icon library or component solution. Avoid using this package in any new development.
gotcha As an older package, `react-icon-base` likely ships CommonJS modules. While most bundlers can handle this, direct import in pure ES Module environments might require specific build configurations or cause issues, especially in Node.js ESM projects.
Fix: Ensure your build tool (Webpack, Rollup, Parcel, Vite) is configured to correctly handle CommonJS modules. If using Node.js with `"type": "module"` in `package.json`, you might need dynamic `import()` or specific loader configurations.

Install

npm install react-icon-base npm
yarn add react-icon-base yarn
pnpm add react-icon-base pnpm

Imports

IconBase
wrong:
```
import { IconBase } => from 'react-icon-base';
```
correct:
```
import IconBase from 'react-icon-base';
```
IconBase is the default export of this package. Named imports will not work. As an older package, it primarily ships CommonJS modules.

Quickstart

This quickstart demonstrates how to create a custom SVG icon using `IconBase` and how to configure its default props globally using the legacy `childContextTypes` API. The `FaHeart` component wraps the SVG path in `IconBase`, while `IconWrapper` provides context.

import React from 'react';
import IconBase from 'react-icon-base';

// Example: Creating a Heart icon using IconBase
class FaHeart extends React.Component {
    render() {
        return (
            <IconBase viewBox="0 0 1792 1896.0833" {...this.props}>
                <g><path d="m896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z"/></g>
            </IconBase>
        )
    }
}

// To provide global configuration via legacy context:
import PropTypes from 'prop-types';
class IconWrapper extends React.Component {
    static childContextTypes = {
        reactIconBase: PropTypes.object
    };

    getChildContext() {
        return {
            reactIconBase: {
                color: 'blue',
                size: 32,
                style: { margin: '5px' }
            }
        }
    }

    render() {
        return <FaHeart />;
    }
}

export default IconWrapper;

view raw JSON →