Registry / web-framework / react-icon-base

react-icon-base

library2.1.2jsnpmunverified

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.

web-framework

npm install react-icon-base

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-ICON-BASE

react-icon-base

web-frameworkjavascriptv2.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

IconBase

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

✗ 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.

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;

Debug

Known issues

breakingThe 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.

affects: >=16.3.0

breakingThis 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.

affects: >=2.1.2

gotchaAs 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.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'contextTypes')

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`.

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.

Upgrade

Version history

2.1.2latest on npm

Audit

Dependencies

prop-typesrequiredUsed for type checking component props and childContextTypes definitions.

reactrequiredCore React library required for component definition and JSX rendering.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/gorangajic/react-icon-base ↗

packagehttps://www.npmjs.com/package/react-icon-base ↗