appbaseio / appbaseio/reactivesearch
refactor: consolidate 12 near-identical SVG icon components into one pattern
- Vorherrschende Sprache
- JavaScript
- Sterne
- 4.9k
- Forks
- 478
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
## Problem
The shared components directory has 12 individual SVG components, each with:
- The same styled wrapper import (`@emotion/styled`)
- The same propTypes declaration
- The same React component structure
- Only the SVG `` data differs
Files: `SearchSvg.js`, `CancelSvg.js`, `ThumbsUpSvg.js`, `ThumbsDownSvg.js`, `MicSvg.js`, `MuteSvg.js`, `ListenSvg.js` (523 lines!), `AutofillSvg.js`, `DownloadSvg.js`, `CustomSvg.js`, `Icons.js` (has 4 more icons)
~83% of each file is duplicated boilerplate.
## Suggested Fix
Option A: A single `icons.js` registry mapping icon names to SVG path data, with one shared `Icon` component.
Option B: A sprite-based approach using `` definitions with `` references.
## Severity
Medium — codebase bloat, ~600 lines of duplication
Beitragsleitfaden
Rechercherichtung
Compare SearchSvg.js, CancelSvg.js, ThumbsUpSvg.js, ThumbsDownSvg.js, MicSvg.js, MuteSvg.js, ListenSvg.js, AutofillSvg.js, DownloadSvg.js, CustomSvg.js, and Icons.js, beginning with their shared wrapper, propTypes, and component structure. Decide between the registry and sprite approaches, then verify that all existing icons remain available without duplicated boilerplate.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- frontend
- Issue-Typ
- Refactoring
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 48/100