[](https://www.npmjs.com/package/react-icons-eject) [](https://www.npmjs.co
npm install react-icons-eject


!types
Tree-shake your react-icons!
This tool scans your project for react-icons usage, extracts only the icons you actually use, and rewrites imports to point to local components — giving you full control over how icons are loaded and potentially improving bundle optimization in frameworks like Next.js.
---
- ✅ Replace all react-icons imports with local icon components
- 🔍 Detect and list all used react-icons in your project
- ⚙️ Customizable import paths and output directories via config file
- 🛠️ Designed for TypeScript projects (.ts, .tsx) using ESM
---
``bash`
npm install -g react-icons-eject
Or use without installing globally:
`bash`
npx react-icons-eject
---
Just run:
`bash`
react-icons-eject
You'll be prompted with several actions:
> Rewrites your imports like:
`ts`
import { RiPlayLine } from 'react-icons/ri';`
> into:ts`
import RiPlayLine from '@/icons/ri/RiPlayLine';
> Allows you to generate only one icon like ri/RiPlayLine into your custom directory.
> Outputs a icons-list.ts file containing all used icon identifiers in your project.
> Automatically extracts all icons you're using and generates them locally.
---
This tool is designed with the following assumptions:
- 📁 Your project uses ES module syntax (import / export) — require() and CommonJS are not supported..ts
- 🧠 It scans , .tsx, .js, and .jsx files, but:import { ... } from 'react-icons/ri'
- ⚠️ Only ESM-based JavaScript () is supported.tsx
- ✅ Generated icons are written as files — intended for TypeScript + React projects
If you're using plain JavaScript and want .js output, feel free to open an issue or submit a PR.
---
On first run, you'll be prompted to create a react-icon-eject.config.ts file like this:
`ts`
// react-icon-eject.config.ts
export const config = {
outputDir: './src/components/icons', // Directory where icons are written
importPath: '@/components/icons', // Path used in rewritten imports
};
> GenIcon.tsx and IconContext.tsx will be copied automatically to outputDir (if not already present).
---
Using react-icons out of the box imports entire icon sets like react-icons/ri`, which can:
- Break tree-shaking in some build tools
- Slow down your dev server and production builds
- Introduce unnecessary dependencies into your bundle
This tool helps by:
- Extracting only the icons you actually use
- Rewriting imports to static, local files
- Giving you full control over how icons are loaded and used
---
MIT – free to use and modify.