refactor: consolidate SearchSvg icon component into centralized pattern by MamtaKumari2006 · Pull Request #2358 · appbaseio/reactivesearch

MamtaKumari2006 · 2026-09-25T08:09:30Z

Proposed Changes

Consolidated SearchSvg icon component into the centralized Icons.js file using the reusable SvgIcons pattern.
Narrowed the scope of refactor: consolidate 12 near-identical SVG icon components into one pattern #2324 to focus strictly on resolving the search icon first to ensure stable testing.

Closes #2324

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).
Create a PR to add/update the storybook (if needed).

…pattern

Copilot

Copilot review overview

🟡 Changes recommended

Unresolved build, lint, snapshot, dependency, and consolidation issues remain.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1 · 2 · 1

Open (4)

Fix Icons.js import casing and export name · New
Complete SVG registry consolidation or narrow the PR scope · New
Preserve or update SearchBox icon snapshot output · New
Fix ESLint semicolon and destructuring spacing violations · New

What changed in this PR

This PR begins centralizing SVG icon rendering and updates site build/editor configuration.

Changes:

Adds a shared search icon registry and renderer.
Updates the legacy SearchSvg wrapper.
Adjusts site scripts and VS Code JSON formatting.

File	Summary
`site/package.json`	Updates site build and start scripts.
`packages/web/src/components/shared/SearchSvg.js`	Delegates search icon rendering.
`packages/web/src/components/shared/Icons.js`	Adds centralized icon rendering infrastructure.
`.vscode/settings.json`	Configures JSON formatting.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

-SearchSvg.propTypes = {
-	style: types.style,
-};
+import { SearchSvg } from './icons';


+export const ICONS_PATHS = {
+	search: `M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,
+		0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,
+		0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,
+		4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z`,


+		<svg
+			alt={name}
+			className={`${name}-icon`}
+			height="12"
+			width="12"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 15 15"


… review

MamtaKumari2006 · 2026-09-28T06:28:08Z

Hi @siddharthlatest, I have resolved the casing issue, formatting violations, and successfully updated all snapshot tests locally (yarn test -u). Everything is passing now. Please review and approve the workflow run. Thanks!

siddharthlatest · 2026-09-28T12:19:45Z

@MamtaKumari2006 Thanks for taking this on. The search re-export is the right shape, but #2324 is the whole set of near-duplicate SVG icons, and this branch only moves the search icon. A few unrelated files should come out, and the helper needs to cover the rest of the icons.

Thanks for the snapshot update. ReactiveSearch Snapshot Tests / build (22.x) is green (about 3 minutes), and the branch merges cleanly with base. The earlier failure on b685cbc1 (39 snapshots in SearchBox and AIAnswer, search path d whitespace) is resolved on this head.

The remaining red check is Labeler / label. It fails in about 6 seconds on fork PRs because that workflow cannot write labels (Resource not accessible by integration). That is a permissions limit, not a product failure, and it does not need a code change.

1. Drop everything that is not the icon change. Remove .vscode/settings.json, the site/package.json NODE_OPTIONS / cross-env script change (cross-env is not added as a dependency), and the regenerated site/dist/common.bundle.js and site/dist/main.js. Also remove the Hindi/English source comment in Icons.js.

2. Replace the search-only helper. SvgIcons hardcodes height="12", viewBox="0 0 15 15", and the search scale, so it cannot absorb the other icons. Use one registry plus a shared icon component, and keep thin default re-exports so existing imports keep working.

3. Move the duplicate modules in packages/web/src/components/shared/. That is AutofillSvg, CancelSvg, DownloadSvg, ListenSvg, MicSvg, MuteSvg, SearchSvg, ThumbsDownSvg, and ThumbsUpSvg. Leave CustomSvg.js alone. It is not a path clone: it dispatches a custom icon, a recent-search icon, or a promoted-search icon.

4. Keep the current DOM shape for the voice icons. Mic, mute, and listen return a fragment with <Global> (and <defs> for listen) beside the <svg>, not inside it. A single <svg> wrapper that puts <Global> in children changes the element tree. Keep <Global> outside <svg>.

5. Re-run snapshot tests after that wider move. The green run covers the current search-icon diff. Any further d or DOM edit needs matching snapshot updates and another green ReactiveSearch Snapshot Tests run. Labeler can stay red.

6. Make the description match the diff. Say that this PR closes #2324 by consolidating those nine modules, and list the files. The current body still narrows the issue to the search icon.

MamtaKumari2006 · 2026-09-28T16:52:36Z

Hi @siddharthlatest, thank you for the detailed review! I'll clean up the unrelated files, consolidate all 9 icon modules into the shared registry, preserve the voice icon DOM structure, and re-run snapshot tests. Will push the updated changes soon.

…pdate snapshots

MamtaKumari2006 · 2026-09-30T08:40:01Z

Hi @siddharthlatest,

I have addressed all the feedback points:

Consolidated all 9 duplicate SVG modules into Icons.js with thin default re-exports.
Preserved the <Global> DOM structure for the voice icons.
Left CustomSvg.js untouched.
Cleaned up site/package.json and comments.
Updated all snapshots locally (yarn test -u) — all 15 test suites are passing.

The PR is ready for your review. Thanks!

refactor: consolidate duplicate SVG icon components into centralized …

651fce3

…pattern

Copilot AI lite review requested due to automatic review settings September 25, 2026 08:09

Copilot started reviewing on behalf of MamtaKumari2006 September 25, 2026 08:10 View session

Copilot AI reviewed Sep 25, 2026

View reviewed changes

fix: resolve casing, export names, and format spacing to pass copilot…

b685cbc

… review

MamtaKumari2006 changed the title ~~refactor: consolidate duplicate SVG icon components into centralized pattern~~ refactor: consolidate SearchSvg icon component into centralized pattern Sep 27, 2026

test: update snapshots for SearchSvg refactor to match SvgIcons output

add8636

MamtaKumari2006 added 2 commits September 29, 2026 21:06

refactor: consolidate 9 duplicate icons, preserve voice SVG DOM and u…

62650b2

…pdate snapshots

style: revert site package.json scripts to original

1992f10

Navigation Menu

refactor: consolidate SearchSvg icon component into centralized pattern - #2358

refactor: consolidate SearchSvg icon component into centralized pattern#2358
MamtaKumari2006 wants to merge 5 commits into
appbaseio:nextfrom
MamtaKumari2006:next

MamtaKumari2006 commented Sep 25, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

MamtaKumari2006 commented Sep 28, 2026

Uh oh!

siddharthlatest commented Sep 28, 2026 •

edited

Loading

Uh oh!

MamtaKumari2006 commented Sep 28, 2026

Uh oh!

MamtaKumari2006 commented Sep 30, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

MamtaKumari2006 commented Sep 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

MamtaKumari2006 commented Sep 28, 2026

Uh oh!

siddharthlatest commented Sep 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MamtaKumari2006 commented Sep 28, 2026

Uh oh!

MamtaKumari2006 commented Sep 30, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MamtaKumari2006 commented Sep 25, 2026 •

edited

Loading

siddharthlatest commented Sep 28, 2026 •

edited

Loading