@hugeicons/migrate 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,282 @@
1
+ <p align="center">
2
+ <a href="https://hugeicons.com">
3
+ <img src="https://hugeicons.com/assets/logo.svg" alt="Hugeicons" width="200" />
4
+ </a>
5
+ </p>
6
+
7
+ <h1 align="center">@hugeicons/migrate</h1>
8
+
9
+ <p align="center">
10
+ <strong>Migrate your project from popular icon libraries to Hugeicons with ease</strong>
11
+ </p>
12
+
13
+ <p align="center">
14
+ <a href="https://www.npmjs.com/package/@hugeicons/migrate"><img src="https://img.shields.io/npm/v/@hugeicons/migrate.svg" alt="npm version" /></a>
15
+ <a href="https://www.npmjs.com/package/@hugeicons/migrate"><img src="https://img.shields.io/npm/dm/@hugeicons/migrate.svg" alt="npm downloads" /></a>
16
+ <a href="https://github.com/hugeicons/migrate/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@hugeicons/migrate.svg" alt="license" /></a>
17
+ </p>
18
+
19
+ ---
20
+
21
+ ## Overview
22
+
23
+ `@hugeicons/migrate` is a powerful CLI tool that helps you migrate your React projects from popular icon libraries like Lucide, Heroicons, and FontAwesome to [Hugeicons](https://hugeicons.com) — the world's largest icon library with 36,000+ icons.
24
+
25
+ ### Features
26
+
27
+ - 🔍 **Smart Detection** - Automatically detects icon libraries used in your project
28
+ - 📊 **Detailed Planning** - Preview all changes before applying them
29
+ - 🔄 **Safe Migration** - Creates automatic backups before making changes
30
+ - â†Šī¸ **Easy Rollback** - Revert changes anytime with built-in restore
31
+ - 📝 **HTML Reports** - Generate beautiful migration reports
32
+ - 🎨 **Style Support** - Choose between Free and Pro icon styles
33
+ - đŸ“Ļ **Auto Install** - Automatically installs required Hugeicons packages
34
+
35
+ ## Installation
36
+
37
+ You can run the migration tool directly using `npx`:
38
+
39
+ ```bash
40
+ npx @hugeicons/migrate
41
+ ```
42
+
43
+ Or install it globally:
44
+
45
+ ```bash
46
+ npm install -g @hugeicons/migrate
47
+ ```
48
+
49
+ ## Quick Start
50
+
51
+ ### Interactive Mode
52
+
53
+ Simply run the CLI without arguments to enter interactive mode:
54
+
55
+ ```bash
56
+ npx @hugeicons/migrate
57
+ ```
58
+
59
+ This will:
60
+ 1. Display a welcome message
61
+ 2. Detect or let you choose the project folder
62
+ 3. Present available commands (scan, plan, apply, revert)
63
+
64
+ ### Command Line Mode
65
+
66
+ You can also run specific commands directly:
67
+
68
+ ```bash
69
+ # Scan your project for icon usage
70
+ npx @hugeicons/migrate scan ./my-project
71
+
72
+ # Generate a migration plan
73
+ npx @hugeicons/migrate plan ./my-project
74
+
75
+ # Preview changes (dry run)
76
+ npx @hugeicons/migrate apply ./my-project
77
+
78
+ # Apply changes
79
+ npx @hugeicons/migrate apply ./my-project --write
80
+
81
+ # Revert to backup
82
+ npx @hugeicons/migrate revert ./my-project
83
+ ```
84
+
85
+ ## Commands
86
+
87
+ ### `scan`
88
+
89
+ Scans your project to detect icon libraries and their usage.
90
+
91
+ ```bash
92
+ npx @hugeicons/migrate scan <project-path>
93
+ ```
94
+
95
+ **Output includes:**
96
+ - Detected icon libraries (Lucide, Heroicons, FontAwesome, etc.)
97
+ - Number of icon usages per library
98
+ - Files containing icons
99
+
100
+ ### `plan`
101
+
102
+ Generates a detailed migration plan showing what will change.
103
+
104
+ ```bash
105
+ npx @hugeicons/migrate plan <project-path>
106
+ ```
107
+
108
+ **Output includes:**
109
+ - Icon mapping (old → new)
110
+ - Files that will be modified
111
+ - Required Hugeicons packages
112
+
113
+ ### `apply`
114
+
115
+ Applies the migration to your project.
116
+
117
+ ```bash
118
+ # Dry run (preview changes)
119
+ npx @hugeicons/migrate apply <project-path>
120
+
121
+ # Apply changes
122
+ npx @hugeicons/migrate apply <project-path> --write
123
+ ```
124
+
125
+ **Options:**
126
+ - `--write` - Actually apply the changes (without this, it's a dry run)
127
+ - `--style <style>` - Icon style: `free` or `pro` (default: `free`)
128
+ - `--report` - Generate an HTML report after migration
129
+
130
+ ### `revert`
131
+
132
+ Restores your project from a backup created during migration.
133
+
134
+ ```bash
135
+ npx @hugeicons/migrate revert <project-path>
136
+ ```
137
+
138
+ Lists available backups and lets you choose which one to restore.
139
+
140
+ ## Supported Libraries
141
+
142
+ | Library | Status |
143
+ |---------|--------|
144
+ | Lucide React | ✅ Fully Supported |
145
+ | Heroicons | 🚧 Coming Soon |
146
+ | FontAwesome | 🚧 Coming Soon |
147
+ | Feather Icons | 🚧 Coming Soon |
148
+ | Phosphor Icons | 🚧 Coming Soon |
149
+
150
+ ## How It Works
151
+
152
+ ### 1. Detection
153
+
154
+ The CLI scans your project for import statements from supported icon libraries:
155
+
156
+ ```typescript
157
+ // Before
158
+ import { Home, Settings, User } from "lucide-react";
159
+ ```
160
+
161
+ ### 2. Mapping
162
+
163
+ Icons are mapped to their Hugeicons equivalents using our comprehensive mapping database:
164
+
165
+ | Lucide | Hugeicons |
166
+ |--------|-----------|
167
+ | `Home` | `Home01Icon` |
168
+ | `Settings` | `Settings01Icon` |
169
+ | `User` | `User01Icon` |
170
+
171
+ ### 3. Transformation
172
+
173
+ The code is transformed to use Hugeicons:
174
+
175
+ ```typescript
176
+ // After
177
+ import { HugeiconsIcon } from "@hugeicons/react";
178
+ import { Home01Icon, Settings01Icon, User01Icon } from "@hugeicons/core-free-icons";
179
+
180
+ // Usage
181
+ <HugeiconsIcon icon={Home01Icon} size={24} />
182
+ ```
183
+
184
+ ### 4. Type Handling
185
+
186
+ TypeScript types are automatically updated:
187
+
188
+ | Before | After |
189
+ |--------|-------|
190
+ | `LucideIcon` | `IconSvgElement` |
191
+ | `React.ComponentProps<"svg">` | `Omit<React.ComponentProps<typeof HugeiconsIcon>, "icon">` |
192
+
193
+ ## Configuration
194
+
195
+ ### Using Pro Icons
196
+
197
+ For Pro icons, you'll need a Hugeicons license. The CLI will prompt for your license key and configure the appropriate registry settings:
198
+
199
+ ```bash
200
+ npx @hugeicons/migrate apply ./my-project --style pro --write
201
+ ```
202
+
203
+ The CLI automatically creates the correct configuration file based on your package manager:
204
+
205
+ | Package Manager | Config File |
206
+ |-----------------|-------------|
207
+ | npm | `.npmrc` |
208
+ | pnpm | `.npmrc` |
209
+ | yarn (v2+) | `.yarnrc.yml` |
210
+ | bun | `bunfig.toml` |
211
+
212
+ ## Migration Report
213
+
214
+ After applying changes with `--write`, an HTML report is generated showing:
215
+
216
+ - Summary statistics
217
+ - Source library detected
218
+ - List of modified files
219
+ - Icon mappings (old → new)
220
+ - Any warnings or manual steps needed
221
+
222
+ The report automatically opens in your default browser.
223
+
224
+ ## Best Practices
225
+
226
+ 1. **Always backup first** - While the CLI creates automatic backups, consider committing your changes to git before migration
227
+
228
+ 2. **Review the plan** - Run `plan` before `apply` to understand what will change
229
+
230
+ 3. **Start with dry run** - Run `apply` without `--write` first to preview changes
231
+
232
+ 4. **Test after migration** - Run your project's tests and linter after migration
233
+
234
+ 5. **Check TypeScript errors** - Some edge cases may need manual fixes
235
+
236
+ ## Troubleshooting
237
+
238
+ ### Icon not found
239
+
240
+ If an icon doesn't have a direct mapping, the original import is kept. Check the migration report for unmapped icons.
241
+
242
+ ### Type errors after migration
243
+
244
+ Some complex TypeScript patterns may need manual adjustment. Common fixes:
245
+
246
+ ```typescript
247
+ // If you see type errors with icon props, use:
248
+ import { type IconSvgElement } from "@hugeicons/react";
249
+
250
+ interface Props {
251
+ icon: IconSvgElement;
252
+ }
253
+ ```
254
+
255
+ ### Dynamic icon rendering
256
+
257
+ The CLI handles patterns like `<item.icon />` by wrapping them:
258
+
259
+ ```typescript
260
+ // Before
261
+ {item.icon && <item.icon />}
262
+
263
+ // After
264
+ {item.icon && <HugeiconsIcon icon={item.icon} />}
265
+ ```
266
+
267
+ ## Requirements
268
+
269
+ - Node.js >= 18.0.0
270
+ - React project with TypeScript or JavaScript
271
+ - Supported icon library installed
272
+
273
+ ## Links
274
+
275
+ - [Hugeicons](https://hugeicons.com) - Browse 36,000+ icons
276
+ - [Documentation](https://hugeicons.com/docs)
277
+ - [Icon Search](https://hugeicons.com/icons)
278
+ - [GitHub](https://github.com/hugeicons/migrate)
279
+
280
+ ## License
281
+
282
+ MIT Š [Hugeicons](https://hugeicons.com)
@@ -0,0 +1,27 @@
1
+ /**
2
+ * Apply Command
3
+ * Apply migration transformations to source files
4
+ */
5
+ interface ApplyOptions {
6
+ root: string;
7
+ include: string[];
8
+ exclude: string[];
9
+ config?: string;
10
+ report: 'text' | 'json' | 'md';
11
+ output?: string;
12
+ verbose: boolean;
13
+ strict: boolean;
14
+ yes: boolean;
15
+ style: string;
16
+ dryRun: boolean;
17
+ write: boolean;
18
+ patch: boolean;
19
+ backup: boolean;
20
+ gitCheck: boolean;
21
+ format: boolean;
22
+ fixDeps: boolean;
23
+ htmlReport?: boolean;
24
+ }
25
+ export declare function applyCommand(options: ApplyOptions): Promise<void>;
26
+ export {};
27
+ //# sourceMappingURL=apply.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"apply.d.ts","sourceRoot":"","sources":["../../src/commands/apply.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAwBH,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA2UD,wBAAsB,YAAY,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAwPvE"}