Skip to content

refactor: consolidate duplicate SVG icon components into centralized pattern - #2358

Open
MamtaKumari2006 wants to merge 2 commits into
appbaseio:nextfrom
MamtaKumari2006:next
Open

MamtaKumari2006 wants to merge 2 commits into
appbaseio:nextfrom
MamtaKumari2006:next

Conversation

@MamtaKumari2006

Copy link
Copy Markdown

Proposed Changes

  • Refactored duplicate SVG icon components into a single centralized icons.js registry.
  • Added a reusable SvgIcon component to eliminate redundant styled-wrapper and SVG boilerplate.
  • Added backward compatibility exports so existing imports do not break.

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).

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

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 High severity · 2 Medium severity · 1 Low severity

Open (4)
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';
Comment on lines +17 to +21
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`,
Comment on lines +31 to +37
<svg
alt={name}
className={`${name}-icon`}
height="12"
width="12"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 15 15"
Comment on lines +22 to +24
}

export const svgIcons = ({name,style, ...props}) => {

This branch has not been deployed

No deployments
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

2 participants