Migration Tool
Commands

Commands

The migration tool provides several commands to help you migrate your project safely.

scan

Scans your project to detect icon libraries and their usage.

npx @hugeicons/migrate scan <project-path>

Output

The scan command provides:

  • Detected icon libraries (Lucide, FontAwesome, Heroicons, Feather, Tabler, Phosphor)
  • Number of icon usages per library
  • Files containing icons

Example

npx @hugeicons/migrate scan ./my-react-app

Output:

Scanning project...
Found lucide-react (42 usages in 8 files)
Found @heroicons/react (15 usages in 3 files)

Files with icons:
  - src/components/Header.tsx
  - src/components/Sidebar.tsx
  - src/pages/Dashboard.tsx
  ...

plan

Generates a detailed migration plan showing what will change.

npx @hugeicons/migrate plan <project-path>

Output

The plan command shows:

  • Icon mapping (old → new)
  • Files that will be modified
  • Required Hugeicons packages

Example

npx @hugeicons/migrate plan ./my-react-app

Output:

Migration Plan

Icon Mappings:
  Home → Home01Icon
  Settings → Settings01Icon
  User → UserIcon
  Bell → Notification01Icon

Files to modify:
  - src/components/Header.tsx (4 icons)
  - src/components/Sidebar.tsx (8 icons)
  - src/pages/Dashboard.tsx (12 icons)

Required packages:
  - @hugeicons/react
  - @hugeicons/core-free-icons

apply

Applies the migration to your project.

# Dry run (preview changes)
npx @hugeicons/migrate apply <project-path>
 
# Apply changes
npx @hugeicons/migrate apply <project-path> --write

Options

  • --write - Actually apply the changes (without this, it's a dry run)
  • --style <style> - Icon style: free or pro (default: free)
  • --report - Generate an HTML report after migration

Examples

Dry run (preview only):

npx @hugeicons/migrate apply ./my-react-app

Apply with free icons:

npx @hugeicons/migrate apply ./my-react-app --write

Apply with pro icons:

npx @hugeicons/migrate apply ./my-react-app --write --style pro

Apply and generate report:

npx @hugeicons/migrate apply ./my-react-app --write --report

What Happens During Apply

  1. Backup Creation - Creates a timestamped backup of your project
  2. Package Installation - Installs required Hugeicons packages
  3. Code Transformation - Updates imports and JSX
  4. Type Updates - Updates TypeScript types
  5. Report Generation - Creates an HTML migration report (with --write)

revert

Restores your project from a backup created during migration.

npx @hugeicons/migrate revert <project-path>

How It Works

  1. Lists available backups with timestamps
  2. Lets you choose which backup to restore
  3. Restores all files from the selected backup

Example

npx @hugeicons/migrate revert ./my-react-app

Output:

Available Backups:

1. 2024-01-15_14-30-25 (2 hours ago)
2. 2024-01-15_10-15-10 (6 hours ago)
3. 2024-01-14_16-45-00 (yesterday)

Select backup to restore: 1

Successfully restored from backup

Migration Report

After applying changes with --write, an HTML report is generated showing:

  • Summary statistics
  • Source library detected
  • List of modified files
  • Icon mappings (old → new)
  • Any warnings or manual steps needed

The report automatically opens in your default browser.

Report Location

Reports are saved in your project directory:

<project-path>/.hugeicons-migration-report.html

You can also explicitly generate a report:

npx @hugeicons/migrate apply ./my-project --write --report

Next Steps

Quick StartTroubleshooting