Flagsmith / Flagsmith/flagsmith
Remove @ionic/react IonIcon dependency
- Dominant language
- Python
- Stars
- 6.6k
- Forks
- 567
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 121
Description
## Problem
`@ionic/react` and `ionicons` are **far more embedded than initially reported**. The original estimate was 3 icons in 4 files — the actual usage is:
- **42 files** importing `IonIcon` from `@ionic/react`
- **~35 unique ionicons** used across the codebase
This makes `IonIcon` effectively a **second icon system** running in parallel with `Icon.tsx` (~60 inline SVGs). Combined with `@material-ui/core` icons (#7021), we have three icon systems coexisting.
### Why remove it
| Package | Size on disk |
|---------|-------------|
| `@ionic/react` | 1.1 MB |
| `@ionic/core` (transitive) | 29 MB |
| `ionicons` | 20 MB |
| **Total** | **~50 MB** |
We're pulling in **50 MB of dependencies** — including the entire Ionic framework core — to use a single component: `` as an SVG renderer.
- **Install/CI cost**: 50 MB slows down `npm install` and CI caching
- **Maintenance risk**: `@ionic/react` v7 is a framework-level dependency we don't use as a framework — it can introduce breaking changes, security advisories, or React compatibility issues for no benefit
- **DX tax**: two icon APIs (`` vs ``) with different patterns means no single convention to learn
It's not urgent, but it's a hygiene issue worth addressing as part of the icon unification work.
### Unique icons used (~35)
`add`, `alarmOutline`, `apps`, `barChart`, `bookSharp`, `caretDown`, `chatbox`, `checkmark`, `checkmarkCircle`, `checkmarkSharp`, `chevronBackOutline`, `chevronDown`, `chevronForward`, `chevronForwardOutline`, `chevronUp`, `close`, `closeCircle`, `cloudDownloadOutline`, `createOutline`, `document`, `documents`, `ellipsisHorizontal`, `gitBranch`, `gitCompare`, `informationCircle`, `informationCircleOutline`, `lockClosed`, `logoGithub`, `menu`, `playCircle`, `pricetag`, `rocket`, `search`, `statsChart`, `timeOutline`, `warning`
### Files affected (42)
- `AccordionCard.tsx`, `AdminAPIKeys.js`, `BetaFlag.tsx`, `BreadcrumbSeparator.tsx`, `BuildVersion.tsx`
- `ChangeRequestModal.tsx`, `ChangeRequestDetailPage.tsx`, `ChangeRequestsList.tsx`
- `ChipInput.tsx`, `ClearFilters.tsx`, `CodeHelp.js`, `Collapsible.js`, `ConnectedGroupSelect.tsx`
- `CreateGroup.tsx`, `CreateRole.tsx`, `CreateSAML.tsx`
- `EditPermissions.tsx`, `EnvironmentAside.tsx`, `EventTextBlocks.tsx`
- `FeatureExport.tsx`, `FeatureHealthEventsList.tsx`, `FeatureImport.tsx`, `FeaturesEmptyState.tsx`
- `FlagOwnerGroups.js`, `FlagOwners.js`, `GithubStar.tsx`, `HomePage.tsx`
- `IdentifierString.tsx`, `InfoMessage.tsx`, `IntegrationSelect.tsx`, `InteractiveDemo.tsx`, `InviteUsers.tsx`
- `NavSubLink.tsx`, `OverflowNav.tsx`, `Paging.js`, `PanelSearch.tsx`, `PasswordRequirements.js`
- `PlanBasedAccess.tsx`, `Resources.tsx`, `StaleFlagWarning.tsx`, `StatItem.tsx`, `SuccessMessage.tsx`
- `TableFilter.tsx`, `TableFilterOptions.tsx`, `TagContent.tsx`, `UnhealthyFlagWarning.tsx`, `ValueEditor.js`
- `project-components.js`, `toast.tsx`
## Solution
This should be tackled **after #7019** (Icon.tsx refactor into individual SVG files). The approach:
1. Complete #7019 — split `Icon.tsx` into individual SVG component files
2. Add the ~35 ionicons as individual SVG components in the new icon system
3. Replace all 42 `IonIcon` imports with the unified icon components
4. Remove `@ionic/react` and `ionicons` from `package.json`
## Acceptance criteria
- [ ] All ~35 icons render identically after migration
- [ ] `@ionic/react` and `ionicons` removed from dependencies
- [ ] Bundle size reduction measurable
- [ ] Single icon system across the codebase
## Dependencies
- Blocked by #7019 (Icon.tsx refactor)
---
Part of the Design System Audit (#6606) · Epic: #6882
Contributor guide
Assessment
This issue has not been assessed yet.