refactor: consolidate 12 near-identical SVG icon components into one pattern

[AshayK003]

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