Skip to Content
Migration ToolCommands

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