Skip to content

Improve MCP SVG component with accessibility, theming, and flexible sizing#1355

Open
yasnazariel wants to merge 1 commit intobase:masterfrom
yasnazariel:patch-5
Open

Improve MCP SVG component with accessibility, theming, and flexible sizing#1355
yasnazariel wants to merge 1 commit intobase:masterfrom
yasnazariel:patch-5

Conversation

@yasnazariel
Copy link
Copy Markdown

Overview

This PR refactors the MCP SVG component to make it more reusable, accessible, and theme-friendly.

Changes

  • Switched from hardcoded fill="white" to currentColor to support dark/light themes
  • Added size prop for flexible and responsive sizing
  • Added className and spread props for easier customization
  • Removed fixed pt units in favor of scalable dimensions
  • Added accessibility improvements (role="img", aria-label)

Why this matters

The previous implementation was:

  • Not theme-aware (hardcoded color)
  • Not reusable (fixed size, no props)
  • Missing accessibility support

This update ensures the component can be used consistently across the app while following best practices.

Impact

  • No breaking changes expected (visual output remains the same by default)
  • Improves developer experience and UI consistency

Example

<McpSvg size={40} className="text-white dark:text-black" />

…ity)

Refactor MCP SVG component to improve usability, accessibility, and flexibility.

Changes:
- Replace hardcoded fill color with `currentColor` for theme support
- Add `size` prop for responsive scaling
- Add `className` and SVG props for better reusability
- Remove fixed pt units in favor of flexible sizing
- Add accessibility attributes (`role`, `aria-label`)

This makes the component more reusable across different UI contexts and compatible with dark/light themes.
@cb-heimdall
Copy link
Copy Markdown
Collaborator

🟡 Heimdall Review Status

Requirement Status More Info
Reviews 🟡 0/1
Denominator calculation
Show calculation
1 if user is bot 0
1 if user is external 0
2 if repo is sensitive 0
From .codeflow.yml 1
Additional review requirements
Show calculation
Max 0
0
From CODEOWNERS 0
Global minimum 0
Max 1
1
1 if commit is unverified 0
Sum 1

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.

2 participants