Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yasnazariel wants to merge 1 commit into
base: master
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 30 additions & 29 deletions storybook/stories/components/svg/McpSvg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
export default function McpSvg() {
export default function McpSvg({
size = 50,
className,
...props
}: {
size?: number;
className?: string;
} & React.SVGProps<SVGSVGElement>) {
return (
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
width="50pt"
height="50pt"
viewBox="0 0 200.000000 200.000000"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 200 200"
width={size}
height={size}
fill="currentColor"
role="img"
aria-label="MCP logo"
className={className}
{...props}
>
<g
transform="translate(-30.000000,200.000000) scale(0.100000,-0.100000)"
fill="white"
stroke="none"
>
<path
d="M1040 1781 c-66 -20 -118 -66 -433 -379 -354 -354 -363 -365 -321
-406 36 -36 51 -24 394 319 360 360 379 375 457 360 79 -14 143 -87 143 -163
0 -69 -27 -103 -285 -362 -260 -261 -274 -279 -239 -314 35 -36 54 -22 299
225 132 133 260 254 284 270 134 87 306 -49 250 -198 -5 -15 -149 -167 -319
-338 -210 -210 -314 -322 -325 -348 -26 -64 -13 -99 72 -188 41 -43 84 -81 94
-84 30 -10 69 20 69 53 0 21 -16 44 -65 92 -36 35 -65 71 -65 80 0 8 138 152
306 320 342 341 354 357 354 470 0 44 -7 80 -21 110 -44 98 -148 170 -246 170
l-53 0 0 53 c0 168 -189 307 -350 258z"
/>
<path
d="M839 1314 c-295 -294 -314 -320 -312 -433 2 -203 215 -336 395 -248
40 20 114 88 307 280 210 211 254 259 254 283 0 30 -25 54 -57 54 -13 0 -111
-91 -276 -254 -140 -140 -265 -259 -277 -265 -12 -6 -44 -11 -71 -11 -90 0
-162 72 -162 162 0 27 5 59 11 71 6 12 125 137 265 277 163 165 254 263 254
276 0 27 -19 50 -49 59 -20 6 -53 -23 -282 -251z"
/>
<g transform="translate(-30,200) scale(0.1,-0.1)">
<path d="M1040 1781 c-66 -20 -118 -66 -433 -379 -354 -354 -363 -365 -321
-406 36 -36 51 -24 394 319 360 360 379 375 457 360 79 -14 143 -87 143 -163
0 -69 -27 -103 -285 -362 -260 -261 -274 -279 -239 -314 35 -36 54 -22 299
225 132 133 260 254 284 270 134 87 306 -49 250 -198 -5 -15 -149 -167 -319
-338 -210 -210 -314 -322 -325 -348 -26 -64 -13 -99 72 -188 41 -43 84 -81 94
-84 30 -10 69 20 69 53 0 21 -16 44 -65 92 -36 35 -65 71 -65 80 0 8 138 152
306 320 342 341 354 357 354 470 0 44 -7 80 -21 110 -44 98 -148 170 -246 170
l-53 0 0 53 c0 168 -189 307 -350 258z" />
<path d="M839 1314 c-295 -294 -314 -320 -312 -433 2 -203 215 -336 395 -248
40 20 114 88 307 280 210 211 254 259 254 283 0 30 -25 54 -57 54 -13 0 -111
-91 -276 -254 -140 -140 -265 -259 -277 -265 -12 -6 -44 -11 -71 -11 -90 0
-162 72 -162 162 0 27 5 59 11 71 6 12 125 137 265 277 163 165 254 263 254
276 0 27 -19 50 -49 59 -20 6 -53 -23 -282 -251z" />
</g>
</svg>
);
Expand Down