icomp

A CLI and UI tool for developers to generate React functional Icon components from SVG files.

✨ Features

• Convert SVG files to React functional components
• Auto-generate index files
• CLI tool with watch mode for auto-updating components
• Supports SVG attributes and props
• UI tool for easy SVG management
• Simple and intuitive interface
• Customizable component names
• Drag and drop support in UI mode
• Paste SVG code or file directly into the UI
• Paste icon directly from Figma
• Option to generate single or multiple (selected) components
• Lightweight and developer-friendly

📦 Installation

Install globally:

npm install -g icomp

Or use via npx:

npx icomp [command]

Or as a dev dependency:

npm install --save-dev icomp

🚀 Usage CLI mode

Generate React Components from SVGs

icomp generate --input ./path/to/svg/folder --output ./path/to/output/folder

Example

icomp generate --input ./icons --output ./src/components/icons

Watch mode (listen for changes)

icomp generate --input ./icons --output ./src/components/icons --watch

Options for generate command

Add script to package.json

{
  "scripts": {
    "gen:icons": "icomp generate -i ./icons -o ./src/components/icons -w"
  }
}

🚀 UI mode

Start the UI

icomp ui --input ./path/to/svg/folder --output ./path/to/output/folder

Example

icomp ui --input ./icons --output ./src/components/icons

Start ui with specific port

icomp ui --input ./icons --output ./src/components/icons --port 5001

Options for generate command

Add script to package.json

{
  "scripts": {
    "icomp:ui": "icomp ui -i ./icons -o ./src/components/icons -p 5001"
  }
}

Then open your browser and go to http://localhost:5001 to access the UI.

ℹ️ Tips

• You can drag&drop SVG files into the UI.
• You can paste SVG code directly into the UI.
• You can paste icon directly from Figma.
• You can rename, generate, and delete icons in the UI.
• Index is regenerated automatically.

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

1.7.0 (2025-04-12)

Features

• add support for publishing to GitHub and NPM (76f0aea)
• add UI mode for icon generation (2ad43c9)
• scripts: update publish scripts for env usage (652981a)

Bug Fixes

• append newline to package.json during write (5810a46)

1.6.0 (2025-04-12)

Features

• add IconMascot and improve icons and dashboard (4a3593a)
• add clipboard handling and refactor file imports (53b7f46)

1.5.1 (2025-04-11)

1.5.0 (2025-04-11)

Features

• add CopyButton and IconInfoSection components (7f95c38)
• add GenerateButton and LoaderCards components (096b12b)
• add IconAlertTriangleSolid component and improve CLI (fc992e7)
• add IconInfoCircleSolid and improve icon handling (88bbfe0)
• add IconSection for editing selected icons (f81b820)
• add dropzone with modal for SVG file handling (ec82884)
• add icon generation service and related updates (e4bf33e)
• add icon renaming and related utility features (ae56d9f)
• add keyword cleaning and icon edit functionality (32eed55)
• add remove icon functionality with UI integration (a6c0be5)
• add support for CSS modules in TypeScript (8f31263)
• add SVG import and processing functionality (7919319)
• icon: add tooltip for non-generated icons (740f166)
• IconSection: add tracking for state changes (784b726)
• modal: add ref to track valid backdrop clicks (10a1d14)
• update tsconfig and refactor unused code (973c3d1)

1.4.0 (2025-04-05)

Features

• add warning for ungenerated icons (c18ff09)

1.3.0 (2025-04-05)

Features

• add eslint-plugin-react-hooks and update related usages (5495989)
• add Header component and Tailwind enhancements (e79168f)
• add iconStore with Zustand for icon management (cab7670)
• dashboard: implement icon deselection on click outside (1f46423)
• integrate Dashboard component into App (1ece89e)

1.2.0 (2025-04-03)

Features

• add chokidar to external dependencies (b7163a3)
• add CSS module support and global styling (682044c)
• add dynamic Icon component and server config updates (6dc8efc)
• add dynamic icon fetching and rendering (1b86e62)
• add dynamic Icon loader and config context (79ef49c)
• add ESLint config with TypeScript and Prettier (51853ef)
• add Explorer App and configure Vite for multi-mode builds (7d931d8)
• add HTML plugin and version injection in Vite config (82a630a)
• add icon metadata service and API improvements (ee4d45e)
• add React and related dependencies (36b3e57)
• add SVG processing dependencies and update ignores (b1f1ca3)
• cli: add cachePath utility and update icon usage (c7f6efc)
• cli: add explorer command for icon preview server (bd8d284)
• cli: add indexGenerator to generate index files (ceb4be0)
• cli: add svgo integrations for customizable plugins (b78ea46)
• cli: add component generator for SVG to React (7e6828a)
• cli: add file watcher for SVG changes (cbb7002)
• cli: add plugins and services for SVG transformation (5442c2e)
• cli: add support to re-create existing output path (7b5d6aa)
• cli: extract SVG icon template to a reusable module (fe6d788)
• cli: refactor CLI with new generate command and Rollup (5870245)
• enhance component generation with SVG transformation (48f06e6)
• enhance ESLint and TypeScript configurations (fdfd923)
• explorer: improve icon explorer functionality (b2f6455)
• improve generate functionality and add local packaging (afae4bd)
• integrate Tailwind CSS with Vite setup (4fbb540)
• plugins: add custom SVG transformation plugins (e11f640)
• svg: add adjustColors and cleanSvg plugins (0d4ef4f)
• update build output path and add preview script (20976af)
• watcher: add SVG file validation (9aa0b1d)

1.0.0 (2025-03-28)

Features

• add .gitignore to exclude unwanted files (502db35)
• add CLI tool for generating icons and exploring SVGs (94fad64)
• add support for React component generation from SVG (f9ee17c)
• add type definitions and new dependencies (6b5b7bb)
• add utility for SVG to React component generation (80d2463)
• cli: support async action in CLI (a2b8dfe)
• generate unified export file for components (bda79b2)
• initialize project with basic setup (d314d23)
• integrate Prettier and ESLint configuration (b74f202)
• rename CLI tool and update project details (947efec)