dwindown/jamshalat-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
jamshalat-diary/hugeicons-migration-spec.md
Dwindi Ramadhana 2d09b5b356 Polish navigation, Quran flows, and sharing UX
2026-03-18 00:07:10 +07:00

174 lines
9.0 KiB
Markdown
Raw Permalink Blame History

# HugeIcons Migration Spec
## Scope
- Replace current Lucide icon usage with HugeIcons targets.
- Prioritize Islamic-context icons first (bottom nav, Beranda, Lainnya, Qibla, Qur'an entry points).
- Keep UI behavior unchanged; this spec is icon-only.
## Inventory Summary (Current State)
- Total Lucide references: `158`
- Unique Lucide symbols: `72`
- Non-Lucid icon reference: `Icons.arrow_back` in `quran_murattal_screen.dart`
Top icon-heavy files:
1. `lib/features/settings/presentation/settings_screen.dart`
2. `lib/features/dashboard/presentation/dashboard_screen.dart`
3. `lib/features/quran/presentation/quran_reading_screen.dart`
4. `lib/features/checklist/presentation/checklist_screen.dart`
5. `lib/features/tools/presentation/tools_screen.dart`
## Recommended HugeIcons Style Policy
- `Stroke Rounded` for navigation/system icons.
- `Duotone Rounded` for high-emphasis feature cards.
- Islamic-specific icons use explicit semantic slugs (Qur'an, Tasbih, Kaaba, Dua, Mosque).
## Canonical Mapping (Lucide -> HugeIcons Candidate)
Notes:
- `Confidence` = how certain the target slug/semantic fit is.
- `High` means already validated semantically on HugeIcons.
- `Medium` means strong candidate but should be quickly verified in final implementation pass.
| Lucide | HugeIcons candidate | Confidence | Notes |
|---|---|---|---|
| `home` | `home-01-stroke-rounded` | High | Bottom nav Beranda |
| `calendar` | `calendar-01` | High | Bottom nav Jadwal |
| `bookOpen` | `quran-02-solid-sharp` (feature), `book-open-01-stroke-rounded` (generic) | High | Use Qur'an variant where context is Qur'an |
| `sparkles` | `tasbih` (Dzikir), `sparkles`-family for generic | High/Medium | Dzikir should use Tasbih |
| `wand2` | `magic-wand-01-duotone-rounded` | High | Bottom nav Lainnya |
| `listChecks` | `check-list` | High | Ibadah list |
| `barChart3` | `bar-chart-03-stroke-rounded` | High | Laporan |
| `headphones` | `headset-solid-rounded` | Medium | Murattal/audio |
| `compass` | `compass-duotone-rounded` | High | Qibla entry/action |
| `library` | `books-01-solid-standard` | High | Hadits card |
| `heart` | `dua-solid-sharp` (Doa context), `heart`-family (generic) | High/Medium | Prefer Dua icon for Doa feature |
| `mapPin` | `mosque-location` (Qibla/location context), `location-01` (generic) | High/Medium | Prefer mosque-location in Islamic context |
| `locate` | `compass-duotone-rounded` or `location-focus`-family | Medium | Qibla live-state |
| `locateOff` | `location-off`-family | Medium | Qibla sensor-off |
| `bookmark` | `bookmark-02-stroke-rounded` | Medium | Qur'an/bookmarks |
| `pin` | `pin-location`-family | Medium | Last read |
| `search` | `search-01-stroke-rounded` | Medium | Global search |
| `refreshCw` | `refresh`-family | Medium | Reload actions |
| `settings` | `settings-02-stroke-rounded` | Medium | Global settings |
| `settings2` | `settings-02-stroke-rounded` | Medium | Keep one settings variant |
| `bell` | `notification`-family | Medium | Notification |
| `checkCircle2` | `checkmark-circle`-family | Medium | Completion status |
| `circle` | `circle`-family | Medium | Unchecked state |
| `check` | `tick`-family | Medium | Confirmed state |
| `chevronLeft` | `arrow-left-01-stroke-rounded` | Medium | Back |
| `chevronRight` | `arrow-right-01-stroke-rounded` | Medium | Settings rows |
| `chevronDown` | `arrow-down-01-stroke-rounded` | Medium | Dropdown |
| `chevronUp` | `arrow-up-01-stroke-rounded` | Medium | Expand/collapse |
| `arrowLeft` | `arrow-left-01-stroke-rounded` | Medium | Back |
| `arrowRight` | `arrow-right-01-stroke-rounded` | Medium | Forward |
| `clock` | `time`-family | Medium | Prayer/meta time |
| `sunrise` | `sunrise`-family | Medium | Prayer icon |
| `sun` | `sun`-family | Medium | Prayer icon |
| `cloudSun` | `cloud-sun`-family | Medium | Prayer icon |
| `sunset` | `sunset`-family | Medium | Prayer icon |
| `moon` | `moon`-family | Medium | Prayer/night |
| `volume2` | `volume-high`-family | Medium | Audio toggle |
| `user` | `user-03-stroke-rounded` | Medium | Profile/author |
| `quote` | `quote`-family | Medium | Ayat quote panel |
| `fingerprint` | `fingerprint-01` | Medium | Dzikir tap counter |
| `inbox` | `inbox-01` | Medium | Empty state |
| `wifiOff` | `wifi-off-01` | Medium | Offline state |
| `star` | `star`-family | Medium | Ratings/highlight |
| `building` | `mosque-01` (Islamic), `building`-family (generic) | Medium | Prefer mosque if religious place context |
| `minusCircle` | `minus-sign-circle`-family | Medium | Counter controls |
| `plusCircle` | `plus-sign-circle`-family | Medium | Counter controls |
| `moonStar` | `moon-stars`-family | Medium | Night checklist |
| `trendingUp` | `chart-up`-family | Medium | Trend KPI |
| `history` | `history`-family | Medium | Reports history |
| `share2` | `share`-family | Medium | Share action |
| `play` | `play`-family | Medium | Media |
| `pause` | `pause`-family | Medium | Media |
| `stopCircle` | `stop-circle`-family | Medium | Media/record stop |
| `playCircle` | `play-circle`-family | Medium | Media/record play |
| `square` | `stop-square`-family | Medium | Media |
| `skipBack` | `skip-back`-family | Medium | Media |
| `skipForward` | `skip-forward`-family | Medium | Media |
| `shuffle` | `shuffle`-family | Medium | Media |
| `listMusic` | `playlist`-family | Medium | Media list |
| `music` | `music-note`-family | Medium | Media indicator |
| `brain` | `brain`-family | Medium | Hafalan mode |
| `gem` | `diamond`/`gem`-family | Medium | Highlight badge |
| `flag` | `flag`-family | Medium | Marker |
| `trash2` | `delete`-family | Medium | Remove bookmark |
| `layoutDashboard` | `dashboard-square`-family | Medium | Settings |
| `timer` | `timer`-family | Medium | Timing settings |
| `type` | `text`-family | Medium | Typography settings |
| `vibrate` | `vibration`-family | Medium | Haptic settings |
| `pencil` | `edit`-family | Medium | Edit profile |
| `info` | `information-circle`-family | Medium | Info |
| `logOut` | `logout-01`-family | Medium | Logout |
| `languages` | `language`-family | Medium | Qur'an enrichment language |
## Screen-Level Migration Targets
### P0: Bottom Navigation
File: `lib/core/widgets/bottom_nav_bar.dart`
- `home` -> `home-01-stroke-rounded`
- `calendar` -> `calendar-01`
- `bookOpen` -> `quran-02-solid-sharp`
- `sparkles` -> `tasbih`
- `wand2` -> `magic-wand-01-duotone-rounded`
- `listChecks` -> `check-list`
- `barChart3` -> `bar-chart-03-stroke-rounded`
### P0: Beranda Quick Access + Header Context
File: `lib/features/dashboard/presentation/dashboard_screen.dart`
- Qur'an card: `bookOpen` -> `quran-02-solid-sharp`
- Murattal: `headphones` -> `headset-solid-rounded`
- Dzikir: `sparkles` -> `tasbih`
- Doa: `heart` -> `dua-solid-sharp`
- Hadits: `library` -> `books-01-solid-standard`
- Qibla button/location: `compass/mapPin` -> `compass-duotone-rounded` + `mosque-location`
- Prayer state icons (`sunrise/sun/cloudSun/sunset/moon`) -> matching HugeIcons weather/time family
### P0: Lainnya (Tools)
File: `lib/features/tools/presentation/tools_screen.dart`
- Same feature mapping as Beranda quick access.
- App-bar/system icons remain generic HugeIcons stroke-rounded (`bell`, `settings`, `share`).
### P0: Qibla Screen
File: `lib/features/qibla/presentation/qibla_screen.dart`
- Back: `arrowLeft` -> `arrow-left-01-stroke-rounded`
- Live state: `locate/locateOff` -> location-focus/location-off family
- Location marker: `mapPin` -> `mosque-location` (preferred) or `location-01`
### P1: Qur'an, Dzikir, Doa, Hadits
- Qur'an family files: prioritize Qur'an/bookmark/media semantics.
- Dzikir screen: `fingerprint` may remain if preferred UX metaphor; alternative `tasbih` for stronger Islamic tone.
- Doa/Hadits list screens: keep simple system icon replacements for `search`, `refresh`.
### P2: Settings / Checklist / Laporan
- Mostly generic system icons; migrate to HugeIcons equivalents with minimal semantic risk.
## Proposed Implementation Contract
1. Introduce wrapper layer (single source of truth): `lib/app/icons/app_icons.dart`
2. Keep semantic names stable in app code (`AppIcons.quran`, `AppIcons.dzikir`, `AppIcons.qibla`, etc.).
3. Map `AppIcons.*` to HugeIcons package symbols.
4. Perform migration by feature slices (P0 -> P2), with visual QA after each slice.
## QA Checklist
- Bottom nav recognizability retained at 24dp.
- Active/inactive contrast unchanged.
- No icon clipping at 20/24dp sizes.
- Islamic features feel more explicit (Qur'an, Dzikir, Doa, Qibla).
- Dark/light mode visual consistency maintained.
## Reference Links (HugeIcons)
- https://hugeicons.com/icon/quran-02-solid-sharp
- https://hugeicons.com/icon/tasbih
- https://hugeicons.com/icon/mosque-location
- https://hugeicons.com/icon/kaaba-01-stroke-standard
- https://hugeicons.com/icon/dua-solid-sharp
- https://hugeicons.com/icon/books-01-solid-standard
- https://hugeicons.com/icon/home-01-stroke-rounded
- https://hugeicons.com/icon/calendar-01
- https://hugeicons.com/icon/check-list
- https://hugeicons.com/icon/magic-wand-01-duotone-rounded
- https://hugeicons.com/icon/bar-chart-03-stroke-rounded
- https://hugeicons.com/icon/compass-duotone-rounded
- https://hugeicons.com/icon/headset-solid-rounded
Reference in New Issue View Git Blame Copy Permalink