Update to Hugeicons

{
  "description": "Migrate a project's icons to Hugeicons — from the deprecated hugeicons-react / @hugeicons/react-pro / hugeicons-react-native packages, from @hugeicons/core-free-icons 4.2 to 4.3, or from lucide-react, @heroicons/react, or react-icons. Use whenever a project imports any of those packages and the task is to switch, replace, upgrade, or migrate icons to Hugeicons, or when you see a deprecated hugeicons-react import in code you are editing.",
  "included_files": [
    {
      "relative_path": "references/from-heroicons.md",
      "size_in_bytes": 10462
    },
    {
      "relative_path": "references/from-lucide.md",
      "size_in_bytes": 5712
    },
    {
      "relative_path": "references/from-react-icons.md",
      "size_in_bytes": 13920
    },
    {
      "relative_path": "references/legacy-hugeicons.md",
      "size_in_bytes": 10625
    }
  ],
  "name": "hugeicons-migrate",
  "skill_md_contents": "---\nname: hugeicons-migrate\ndescription: Migrate a project's icons to Hugeicons — from the deprecated hugeicons-react / @hugeicons/react-pro / hugeicons-react-native packages, from @hugeicons/core-free-icons 4.2 to 4.3, or from lucide-react, @heroicons/react, or react-icons. Use whenever a project imports any of those packages and the task is to switch, replace, upgrade, or migrate icons to Hugeicons, or when you see a deprecated hugeicons-react import in code you are editing.\n---\n\n# Migrate to Hugeicons\n\nCompanion to the `hugeicons` skill (required — read its §4 for how to resolve icon names). That\nskill covers *using* Hugeicons; this one covers *replacing* another icon setup with it, in bulk,\nwithout inventing a single icon name.\n\n> ## ⚠️ Every icon name gets resolved before it is written\n>\n> Neither skill ships an icon list — the catalog changes with every release. Resolve every target\n> name against a live source before it goes into code:\n>\n> - **MCP connected** — one `search_icons` call with every unmapped name, comma-separated, and\n>   use the `component` field verbatim. A migration resolves dozens of names, so batching is the\n>   difference between one call and dozens; keep `limit` low and let tags stay off:\n>\n>   ```\n>   search_icons(query: \"trash, settings, chevron down, ...\", limit: 3)\n>   ```\n>\n>   `search_icons` takes up to 10 terms per call — chunk a long list into batches of 10.\n>\n> - **No MCP** — grep the installed package, which matches the project's own version:\n>\n>   ```bash\n>   grep -oE 'declare const \\w+Icon' \\\n>     node_modules/@hugeicons/core-free-icons/dist/types/index.d.ts \\\n>     | sed 's/declare const //' | grep -i trash\n>   ```\n>\n> Never emit a name you haven't resolved. One guessed name breaks the whole build\n> (`Module has no exported member`). **\"No confident match\" is a valid outcome:** leave that call\n> site untouched, list the name as unmapped, and ask — do not substitute a look-alike silently.\n>\n> The per-source name maps in `references/` were verified when written. Treat them as candidates:\n> if a mapped name fails to resolve, it was renamed in a later release — re-resolve it.\n\n## 1. Detect the source — from imports, not package.json\n\nDead dependencies lie; imports don't.\n\n```bash\ngrep -rnoE \"from ['\\\"](hugeicons-react|@hugeicons/react-pro|hugeicons-react-native|@hugeicons/react-native-pro|lucide-react|@heroicons/react[^'\\\"]*|react-icons[^'\\\"]*)['\\\"]\" src | sort | uniq -c\n```\n\n| Import matches | Reference to read |\n|---|---|\n| `hugeicons-react`, `@hugeicons/react-pro`, `hugeicons-react-native`, `@hugeicons/react-native-pro` | [references/legacy-hugeicons.md](references/legacy-hugeicons.md) |\n| `@hugeicons/core-free-icons` already, but the build fails on missing exports after an upgrade | [references/legacy-hugeicons.md](references/legacy-hugeicons.md) §5 |\n| `lucide-react` | [references/from-lucide.md](references/from-lucide.md) |\n| `@heroicons/react/…` | [references/from-heroicons.md](references/from-heroicons.md) |\n| `react-icons/…` | [references/from-react-icons.md](references/from-react-icons.md) |\n\nRead only the reference(s) that matched. Each one has the package swap, the prop translation,\nand a verified name map for that source.\n\n## 2. The universal rewrite\n\nWhatever the source, the shape of the change is the same: the icon stops being a **component**\nand becomes **data** passed to one renderer.\n\n```tsx\n// before (any source)\nimport { Trash2 } from 'lucide-react'\n<Trash2 size={20} className=\"text-red-500\" onClick={remove} />\n\n// after\nimport { HugeiconsIcon } from '@hugeicons/react'\nimport { TrashIcon } from '@hugeicons/core-free-icons'\n<HugeiconsIcon icon={TrashIcon} size={20} className=\"text-red-500\" onClick={remove} />\n```\n\n- Renderer: `HugeiconsIcon` from `@hugeicons/react` (or `/react-native`, `/vue`, `/svelte`;\n  `<hugeicons-icon>` in Angular). Icons: named exports from `@hugeicons/core-free-icons`.\n- `className`, `style`, `onClick`, `aria-*`, `data-*`, `ref` carry over unchanged —\n  `HugeiconsIcon` forwards `ref` and spreads unknown props onto the `<svg>`.\n- Then apply the minimal-props rule from the `hugeicons` skill: don't write `size={24}`,\n  `color=\"currentColor\"` or `strokeWidth={1.5}` — they're the defaults.\n- Icon-as-value patterns (`icon: SomeIcon` in a config array, `const Icon = map[name]`) keep\n  the same shape; only the render site changes to `<HugeiconsIcon icon={value} />`. The type\n  for such values is `IconSvgElement` from `@hugeicons/react`.\n\n## 3. Bulk procedure\n\nResolve names once, up front — never file by file.\n\n```bash\n# 1. distinct icon names in use (adjust the regex per source; the reference file gives it)\ngrep -rhoE \"\\b(Fa|Md|Io|Hi|Lu)[A-Z][A-Za-z0-9]*|\\b[A-Z][A-Za-z0-9]*Icon\\b\" src | sort -u > /tmp/src-icons.txt\n```\n\n2. Map every name using the source's reference: table → exact/numbered rule → grep the\n   catalog by concept. Write the map down (a scratch table in your reply) before editing.\n   Anything unresolved goes in an **unmapped** list.\n3. If the unmapped list is non-empty, stop and show it with your best candidates for each. Get\n   the user's pick. Don't start rewriting with holes in the map.\n4. Swap packages (install/uninstall commands are in the reference).\n5. Rewrite imports and call sites in every file, applying the map and the prop translation.\n6. Verify:\n\n```bash\ngrep -rnE \"from ['\\\"](hugeicons-react|@hugeicons/react-pro|hugeicons-react-native|lucide-react|@heroicons/react|react-icons)\" src   # must be empty\nnpx tsc --noEmit   # or the project's typecheck\n```\n\nA `Module '\"@hugeicons/core-free-icons\"' has no exported member 'X'` error means a name slipped\nthrough unchecked — fix it via the catalog, not by guessing a variant.\n\nFor >20 files, do the rewrite with a script (a codemod or `sed` over the import lines and JSX\ntags) rather than by hand, then review the diff. Whatever the tool, step 3 still gates it.\n\n## 4. Style changes to mention once\n\n- **Free is stroke-rounded only.** Migrating from a filled set (heroicons `/solid`, Font\n  Awesome, Material) changes the look to 1.5px outlines. Say so once up front; don't try to\n  compensate with `strokeWidth`. Filled styles exist in the Pro packages\n  (`@hugeicons-pro/core-solid-rounded` etc.) — see the `hugeicons` skill §5.\n- **Stroke weight.** Lucide draws at 2px, Hugeicons at 1.5px. Don't add `strokeWidth={2}`\n  everywhere unless asked.\n- **Default size.** react-icons defaults to `1em`, Hugeicons to `24`. Only icons that relied on\n  inheriting `font-size` need `size=\"1em\"`.\n\n## Out of scope\n\nSay so and stop rather than improvising:\n- Switching between Hugeicons **styles** (free stroke → Pro solid/duotone) — that's the\n  `hugeicons` skill, §5.\n- Porting between **frameworks** (React → Vue) — the icon names are identical across the\n  `@hugeicons/*` renderers; only the component syntax differs, covered in the `hugeicons` skill.\n- **Icon fonts / CSS classes** (`<i class=\"fa fa-search\">`, Material Icons font) — different\n  mechanism entirely. The name maps here still help pick icons, but there is no mechanical\n  rewrite.\n\n## Troubleshooting\n\n- **`has no exported member 'X'`** — name isn't in the free catalog. Check the renamed table in\n  `legacy-hugeicons.md` §5 first (covers legacy 0.x names and the 4.2 → 4.3 renames), then grep.\n- **Icon renders but wrong glyph** — a numbered variant was picked blind (`Home03Icon` instead of\n  `Home01Icon`). `01` is the canonical one; show the user the alternatives.\n- **Pro import fails** — the name exists only in a Pro package or the `.npmrc` auth is missing.\n  Never point a free project at `@hugeicons-pro/*`.\n- **Icons vanished in React Native** — `react-native-svg` isn't installed; it's a peer dependency.\n"
}