Skip to content

REFACTOR: consolidate duplicate SVG icon components into centralized pattern - #2329

Open
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:refactor/consolidate-svg-icons
Open

REFACTOR: consolidate duplicate SVG icon components into centralized pattern#2329
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:refactor/consolidate-svg-icons

Conversation

@Talha12Shiekh

@Talha12Shiekh Talha12Shiekh commented Jul 28, 2026

Copy link
Copy Markdown

Proposed Changes

Resolves issue #2324 by consolidating 12 near-identical SVG icon components in packages/web/src/components/shared/ into a single, scalable pattern, eliminating ~600 lines of duplicated code (~83% boilerplate reduction per icon file):

  • Centralized Registry (Icons.js): Added a structured iconRegistry mapping icon names (cancel, search, thumbsUp, thumbsDown, mic, mute, listen) to their respective SVG paths, viewBox, xmlns, and keyframe animation styles (@emotion/core).
  • Shared Icon Component: Created a reusable, React.forwardRef-enabled Icon component for prop forwarding (onClick, style, className, ref).
  • 100% Backwards Compatible Re-exports: Updated individual SVG component files (CancelSvg.js, SearchSvg.js, ThumbsUpSvg.js, ThumbsDownSvg.js, MicSvg.js, MuteSvg.js, ListenSvg.js, AutofillSvg.js, DownloadSvg.js) to thin re-exports from Icons.js.

Linked Issues

Checklist

  • Describe the proposed changes and how it'll improve the library experience.
  • Please make sure that there are no linting errors in the code.
  • Add a demo video/gif/screenshot to explain how did you test the fix.
  • If it is a global change, try to add any side effects that it could have.
  • Create a PR to add/update the docs (if needed) at here.
  • Create a PR to add/update the storybook (if needed) at here.

Improvements to the Library Experience

  • Maintainability: Adding or updating icon path data or styling can now be done in a single central location (Icons.js).
  • Codebase Size: Reduces file clutter and bundle size by removing redundant React imports, emotion styled wrappers, and identical propTypes declarations across 12 files.

Side Effects

  • None. All original default export signatures and named exports are preserved, ensuring zero breaking changes for existing consumers or internal components (SearchBox, AIAnswer, SelectedFilters, etc.).

Testing

  • Built CommonJS and ES module outputs (yarn build) and verified JSX syntax across all 10 icon files.
  • Verified that all default exports (export default SearchSvg, etc.) export valid React elements without breaking component imports.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant