Flagsmith / Flagsmith/flagsmith

Remove @ionic/react IonIcon dependency

Open
#7,022 3 comments 0 reactions 1 assignee Claimed by @talissoncosta View on GitHub
front-end tech-debt
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.