Hey folks! π
If youβve ever worked on a design system or just managed a bunch of custom icons in a frontend project, you know the pain of maintaining consistency, reusability, and discoverability. Iβve felt that pain too β so I built a tool to fix it.
Say hello to icomp β a CLI + UI combo for generating React components from your SVG icons and giving you a clean UI to browse and use them easily.
π οΈ What is icomp?
icomp is a dev-friendly npm package that helps you:
Itβs built for teams and individuals who want to keep their icon workflow smooth, automated, and well-organized.
π¦ How it works?
icomp has two main parts:
1. CLI Tool
Run this once and let it do all the boring stuff.
npx icomp generate --input ./icons --output ./src/com/icons --watch
This will:
Optional --watch or -w flag will listen input folder for changes and if you add or change any icon, tool will generate corresponding components immediately.
2. Explorer UI
Spin up a local UI to preview, manage and copy icon snippets instantly:
npx icomp ui --input ./icons --output ./src/com/icons
In UI mode you can:
Why I built it
I was juggling dozens of SVGs across multiple projects. Some icons were duplicated, others hard to find, and sharing code snippets became a mess.
I wanted:
There were tools out there, but most were either too limited or expensive. So I built icomp β customizable, dev-friendly, and tailored for modern React workflows.
π Try it out
You can get started in seconds. Install package as dev-dependency in your project:
npm install icomp --save-dev
And donβt worryβit works great with TypeScript, Vite, and Create React App setups.
For detailed instructions you can visit page on Github
π€ Contributing
icomp is an open-source project, and Iβd love your help to make it even better!
Whether you want to:
your contribution is welcome!
Check out the GitHub repo to get started. Even small improvements are super appreciated. β€οΈ
Happy coding! π¨π§βπ»
More...
If youβve ever worked on a design system or just managed a bunch of custom icons in a frontend project, you know the pain of maintaining consistency, reusability, and discoverability. Iβve felt that pain too β so I built a tool to fix it.
Say hello to icomp β a CLI + UI combo for generating React components from your SVG icons and giving you a clean UI to browse and use them easily.
π οΈ What is icomp?
icomp is a dev-friendly npm package that helps you:
- Convert SVG files into React components
- Automatically generate TypeScript types
- Host a web explorer ui for all your icons
- Copy JSX snippets directly from the UI
Itβs built for teams and individuals who want to keep their icon workflow smooth, automated, and well-organized.
π¦ How it works?
icomp has two main parts:
1. CLI Tool
Run this once and let it do all the boring stuff.
npx icomp generate --input ./icons --output ./src/com/icons --watch
This will:
- Parse all your svg icons from input folder
- Clean and optimize svg xml data
- Replace all fill and stroke colors with currentColor
- Bind width, height and size to component props
- Generate TSX components in output folder
- Generate index.ts with exports for each icon
- Output them in a structure thatβs ready to import in your project
Optional --watch or -w flag will listen input folder for changes and if you add or change any icon, tool will generate corresponding components immediately.
2. Explorer UI
Spin up a local UI to preview, manage and copy icon snippets instantly:
npx icomp ui --input ./icons --output ./src/com/icons
In UI mode you can:
- Explore icons form input folder
- Generate selected or all icons with one click
- Edit icon name and keywords (keywords will be used for search in future updates)
- Remove selected icons
- Import icon by dragging svg file
- Import icon by pasting svg code or file directly into ui dashboard
- Directly import icon from Figma or any similar graphic apps (just copy as svg and paste in UI)
Why I built it
I was juggling dozens of SVGs across multiple projects. Some icons were duplicated, others hard to find, and sharing code snippets became a mess.
I wanted:
- One source of truth for icons
- Easy browsing
- No manual component creation
- Instant code snippet access
There were tools out there, but most were either too limited or expensive. So I built icomp β customizable, dev-friendly, and tailored for modern React workflows.
π Try it out
You can get started in seconds. Install package as dev-dependency in your project:
npm install icomp --save-dev
And donβt worryβit works great with TypeScript, Vite, and Create React App setups.
For detailed instructions you can visit page on Github
π€ Contributing
icomp is an open-source project, and Iβd love your help to make it even better!
Whether you want to:
- Fix a bug π
- Suggest a feature π‘
- Improve the docs π
- Refactor code π§Ό
- Or just open a discussion π¬
your contribution is welcome!
Check out the GitHub repo to get started. Even small improvements are super appreciated. β€οΈ
Happy coding! π¨π§βπ»
More...