#4 Replace lucide-react imports with local TSX icon components

[Anonymous]

Originally created by: matt765

What's going on

The project currently uses two different approaches for icons:

• Local TSX components in src/assets/icons/ — simple, zero-dependency SVG wrappers. There are already 71 of them and they work great.
• lucide-react package — still used in about 30 files, mostly inside Shadcn primitives and a few view components.

It would be nice to unify this and move everything to local TSX icons, so the codebase is consistent and we can drop the lucide-react dependency entirely.

Why bother?

• One less runtime dependency to maintain (~180KB unpacked)
• Full control over SVG markup, sizing, aria-hidden etc.
• Every icon follows the same pattern — easier to reason about

The pattern already exists

If you look at any file in src/assets/icons/, you'll see something like this:

export const CheckIcon = () => (
  <svg
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    width="21"
    height="21"
  >
    <path ... />
  </svg>
);

That's all there is to it. The new icons should follow this exact convention.

How to approach this

1. Search for all from "lucide-react" imports to see what's used and where
2. For each Lucide icon, grab the SVG source from lucide.dev and wrap it in a TSX component in src/assets/icons/
3. Replace the import in the consuming file
4. Once everything is migrated, remove lucide-react from package.json

Where lucide-react is currently used

Shadcn primitives: checkbox.tsx, select.tsx, radio-group.tsx, command.tsx, breadcrumb.tsx, dropdown-menu.tsx, pagination.tsx

View components: ToastContainer.tsx, DateRangeSelector.tsx, ButtonsUI.tsx, CommandUI.tsx, DropdownMenuUI.tsx, PopoverUI.tsx, TabsUI.tsx, TooltipsUI.tsx, AlertsUI.tsx, BreadcrumbsUI.tsx

Tables: UserTable.tsx, InventoryTable.tsx, AdvancedTable.tsx

Forms: SelectInputsForm.tsx, InputFieldsForm.tsx, FormValidationForm.tsx, FileUploadForm.tsx

Stories: tooltip.stories.tsx, input-group.stories.tsx, dropdown-menu.stories.tsx, button.stories.tsx, breadcrumb.stories.tsx, alert.stories.tsx

Done when

• [ ] No visual regressions — icons should look exactly the same as before
• [ ] No imports from lucide-react remain anywhere in the codebase
• [ ] lucide-react is removed from package.json
• [ ] New icons follow the existing naming convention ({Name}Icon.tsx)