HiveGrid-Wireframes/hivegrid-cloud/docs/subframe/INLINE-SVG-MIGRATION.md

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.