{"id":15188,"library":"react-icon-base","title":"React Icon Base Component","description":"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.","status":"abandoned","version":"2.1.2","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/gorangajic/react-icon-base","tags":["javascript","react","icon","base"],"install":[{"cmd":"npm install react-icon-base","lang":"bash","label":"npm"},{"cmd":"yarn add react-icon-base","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-icon-base","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for type checking component props and childContextTypes definitions.","package":"prop-types","optional":false},{"reason":"Core React library required for component definition and JSX rendering.","package":"react","optional":false}],"imports":[{"note":"IconBase is the default export of this package. Named imports will not work. As an older package, it primarily ships CommonJS modules.","wrong":"import { IconBase } => from 'react-icon-base';","symbol":"IconBase","correct":"import IconBase from 'react-icon-base';"}],"quickstart":{"code":"import React from 'react';\nimport IconBase from 'react-icon-base';\n\n// Example: Creating a Heart icon using IconBase\nclass FaHeart extends React.Component {\n    render() {\n        return (\n            <IconBase viewBox=\"0 0 1792 1896.0833\" {...this.props}>\n                <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>\n            </IconBase>\n        )\n    }\n}\n\n// To provide global configuration via legacy context:\nimport PropTypes from 'prop-types';\nclass IconWrapper extends React.Component {\n    static childContextTypes = {\n        reactIconBase: PropTypes.object\n    };\n\n    getChildContext() {\n        return {\n            reactIconBase: {\n                color: 'blue',\n                size: 32,\n                style: { margin: '5px' }\n            }\n        }\n    }\n\n    render() {\n        return <FaHeart />;\n    }\n}\n\nexport default IconWrapper;","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=16.3.0"},{"fix":"Migrate to a currently maintained icon library or component solution. Avoid using this package in any new development.","message":"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.","severity":"breaking","affected_versions":">=2.1.2"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'contextTypes')"},{"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.","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.","error":"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`."}],"ecosystem":"npm"}