Skip to content

feat: add Tabler icon library across SPA #64

Description

@pskillen

Problem

The SPA has no icon library. Navigation and actions use Unicode arrows (, ) and a single emoji cog () in map controls. This is inconsistent, poor for accessibility, and doesn't match Mantine 9's visual language.

Intended outcome

Add @tabler/icons-react (Mantine's native icon set) and roll icons through the SPA tastefully — navigation, primary CRUD actions, import/export, and map settings. Data-dense surfaces (tables, badges, frequency text) stay text-first.

Tasteful-use rules

  • NavLink / Button leftSection with label kept
  • Standard action vocabulary (plus, pencil, trash, arrow-left, download, upload)
  • Size 16 in nav/links, 18 in ActionIcon; stroke={1.5}
  • Named imports per file; no barrel re-exports
  • Icon-only controls must have aria-label

Slices

  1. Foundation — dependency, iconSizes.ts, display conventions
  2. Shell navigation — App.tsx, reference index, ActiveProjectBar
  3. CRUD and back navigation — list/detail/edit routes, ConfirmDeleteModal, ZoneMemberPicker
  4. Import/export/workflows — ImportDropzone, Export, SummaryCard, ProjectList
  5. Map and location — MapControls, UseMyLocationButton
  6. Docs and PR

Affected

  • package.json, src/lib/iconSizes.ts
  • src/App.tsx, nav and action surfaces across routes/components
  • docs/reference/display-conventions.md, docs/features/ui/

Out of scope

  • Leaflet marker divIcon styling
  • OpenGD77 CSV Icon columns
  • Icons on table rows, BandPill, mode badges
  • Alternative icon libraries

Workflow

Branch {num}/paddy/icon-library from origin/main, atomic conventional commits per slice, PR linking Closes #{num}.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions