# Inline-SVG → Subframe Feather migration (cheat sheet)

The icon-**component** migration is complete (all `components/ui/icons/**`,
`components/layouts/icons/**`, `modules/workflowEngine/components/icons/**`, plus
the `lucide-react` / `@radix-ui/react-icons` / `@heroicons` vendor libraries via
`components/ui/icons/vendor.tsx`).

Remaining: ~178 files contain raw inline `<svg>…</svg>` glyphs (270 occurrences).
Many are standard heroicons/lucide glyphs that should be replaced with the Subframe
Feather icons exported from `~/components/ui/icons/vendor`. Replace the whole
`<svg>…</svg>` element with the mapped icon component, **preserving the original
`className` verbatim** (the vendor wrapper bridges sizing via `[&>svg]:size-full`).

## Known path `d` → vendor icon (deterministic)

| path `d` (prefix) | glyph | replace with |
| --- | --- | --- |
| `M12 6v6m0 0v6m0-6h6m-6 0H6` | plus (outline) | `PlusIcon` |
| `M12 4v16m8-8H4` | plus (outline) | `PlusIcon` |
| `M10.75 4.75a.75.75 0 00-1.5 0v4.5…` | plus (small) | `PlusIcon` |
| `M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293…` | chevron-down (solid) | `ChevronDownIcon` |
| `M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293…` | chevron-up (solid) | `ChevronUpIcon` |
| `M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707…` | chevron-right (solid) | `ChevronRightIcon` |
| `M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293…` | chevron-left (solid) | `ChevronLeftIcon` |
| `M15.75 19.5L8.25 12l7.5-7.5` | chevron-left (outline) | `ChevronLeftIcon` |
| `M9 5l7 7-7 7` | chevron-right (outline) | `ChevronRightIcon` |
| `M6 18L18 6M6 6l12 12` | x-mark (outline) | `XIcon` |
| `M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0…` | x-circle | `XCircleIcon` |
| `M16.707 5.293a1 1 0 010 1.414l-8 8…` | check (solid) | `CheckIcon` |
| `M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z` | check-circle | `CheckCircleIcon` |
| `M6 12L3.269 3.126A59.768 59.768 0 0121.485 12…` | paper-airplane / send | `SendIcon` |
| `M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z` | minus-circle | `MinusIcon` |
| `M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7…` | calendar | `CalendarIcon` |
| `M8 4a4 4 0 100 8 4 4 0 000-8z…` / `M21 21l-6-6m2-5a7 7 0 11-14 0…` | search | `SearchIcon` |
| `M2.458 12C3.732 7.943 7.523 5 12 5…` (+ `M15 12a3 3 0 11-6 0…`) | eye | `EyeIcon` |
| home / house glyph (`M2.25 12l8.954-8.955…` or `M3 12l2-2m0 0l7-7 7 7…`) | home | `HomeIcon` |
| star (`M11.48 3.499a.562…` or `M9.049 2.927c.3-.921…`) | star | `StarIcon` |
| envelope (`M2.25 6.75c0-1.243…` / `M3 8l7.89 5.26…` / `M4 4h16v16H4z`-mail) | mail | `MailIcon` |
| at-symbol (`M16.5 12a4.5 4.5 0 11-9 0…`) | at-sign | `AtSignIcon` |
| phone (`M2.25 6.75c0 8.284…` / `M3 5a2 2 0…`) | phone | `PhoneIcon` |
| exclamation-triangle (`M12 9v3.75m-9.303 3.376…` / `M10.29 3.86…`) | warning | `AlertTriangleIcon` |
| arrow-up (solid `M3.293 9.707a1 1 0 010-1.414l6-6…` / outline `M4.5 15.75l7.5-7.5 7.5 7.5`) | arrow-up | `ArrowUpIcon` |
| globe (`M12 21a9.004 9.004 0 008.716-6.747…` / `M21 12a9 9 0 11-18 0…` with meridians) | globe/language | `GlobeIcon` or `LanguagesIcon` |
| question-mark-circle (`M9.879 7.519c1.171-1.025…`) / info (`M11.25 11.25l.041-.02…`) | help/info | `HelpCircleIcon` / `InfoIcon` |
| trending-up (`M2.25 18L9 11.25l4.306 4.307…`) / trending-down | trend | `TrendingUpIcon` / `TrendingDownIcon` |
| pilcrow / paragraph (`M13 4v16M17 4v16M19 4H9.5a4.5…`) | pilcrow | `PilcrowIcon` |

## Rules for the migration

1. **Preserve `className` exactly** (copy the original `className=…` onto the
   replacement icon). Sizing (`h-4 w-4`, `size-4`) and color (`text-*`) keep working.
2. Only replace SVGs that are a **standard single-glyph UI icon** identifiable from
   the table above or unambiguous context. When in doubt, leave it.
3. **Leave bespoke graphics**: multi-path illustrations, brand logos, the
   `viewBox="0 0 172 172"` icon8-style art, empty-state art, charts, the PDF viewer,
   `dangerouslySetInnerHTML` icons. These are not icon-set glyphs.
4. Add `import { … } from "~/components/ui/icons/vendor"` (merge into an existing
   vendor import if present).
5. Never insert JSX comments inside `{cond && ( … )}` expressions.
6. After each batch: `npm run typecheck` and `npm run build` must stay green.