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
<path> 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 <symbol> definitions with <use> references.
Severity
Medium — codebase bloat, ~600 lines of duplication
Problem
The shared components directory has 12 individual SVG components, each with:
@emotion/styled)<path>data differsFiles:
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.jsregistry mapping icon names to SVG path data, with one sharedIconcomponent.Option B: A sprite-based approach using
<symbol>definitions with<use>references.Severity
Medium — codebase bloat, ~600 lines of duplication