| 1 |
import React from "react"; |
| 2 |
|
| 3 |
/** |
| 4 |
* Inline glyphs for the MCP page. Kept here rather than in `~betterdocs/icons` |
| 5 |
* because they are specific to this screen; all of them inherit `currentColor` |
| 6 |
* so they follow the token that colours their surrounding text in both light |
| 7 |
* and dark mode. |
| 8 |
*/ |
| 9 |
|
| 10 |
/** |
| 11 |
* The Model Context Protocol mark — the three nested arcs, on the protocol's own |
| 12 |
* 195x195 grid. This is the glyph every MCP client shows, so a site owner |
| 13 |
* recognises what this screen is before reading a word of it; the abstract |
| 14 |
* sun/asterisk that stood here said nothing (ADR-054). |
| 15 |
*/ |
| 16 |
export const IconMcp = ({ size = 22 }) => ( |
| 17 |
<svg width={size} height={size} viewBox="0 0 195 195" fill="none" stroke="currentColor" strokeWidth="12" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 18 |
<path d="M25 97.85 92.88 29.97c9.37-9.37 24.57-9.37 33.94 0 9.38 9.37 9.38 24.57 0 33.94L75.56 115.18" /> |
| 19 |
<path d="M76.27 114.47l50.55-50.56c9.37-9.37 24.57-9.37 33.95 0 9.37 9.38 9.37 24.58 0 33.95l-61.78 61.78c-2.34 2.34-2.34 6.13 0 8.47l19.34 19.35" /> |
| 20 |
<path d="M109.85 46.94 59.29 97.5c-9.37 9.37-9.37 24.57 0 33.94 9.38 9.38 24.58 9.38 33.95 0l51.25-51.26" /> |
| 21 |
</svg> |
| 22 |
); |
| 23 |
|
| 24 |
export const IconCheck = ({ size = 14 }) => ( |
| 25 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 26 |
<polyline points="20 6 9 17 4 12" /> |
| 27 |
</svg> |
| 28 |
); |
| 29 |
|
| 30 |
export const IconCopy = ({ size = 14 }) => ( |
| 31 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 32 |
<rect x="9" y="9" width="12" height="12" rx="2" /> |
| 33 |
<path d="M5 15V5a2 2 0 0 1 2-2h10" /> |
| 34 |
</svg> |
| 35 |
); |
| 36 |
|
| 37 |
export const IconRefresh = ({ size = 14 }) => ( |
| 38 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 39 |
<path d="M21 12a9 9 0 1 1-2.6-6.4" /> |
| 40 |
<polyline points="21 3 21 9 15 9" /> |
| 41 |
</svg> |
| 42 |
); |
| 43 |
|
| 44 |
export const IconPlay = ({ size = 14 }) => ( |
| 45 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 46 |
<polygon points="6 3 20 12 6 21 6 3" /> |
| 47 |
</svg> |
| 48 |
); |
| 49 |
|
| 50 |
export const IconTrash = ({ size = 15 }) => ( |
| 51 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 52 |
<path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /> |
| 53 |
</svg> |
| 54 |
); |
| 55 |
|
| 56 |
export const IconPlug = ({ size = 18 }) => ( |
| 57 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 58 |
<path d="M9 2v6M15 2v6M6 8h12v3a6 6 0 0 1-12 0V8ZM12 17v5" /> |
| 59 |
</svg> |
| 60 |
); |
| 61 |
|
| 62 |
/** |
| 63 |
* The KPI tiles' marks (ADR-062). `IconPlug` and `IconCode` above serve the |
| 64 |
* first two tiles; these two are the grid and the clock. |
| 65 |
*/ |
| 66 |
export const IconGrid = ({ size = 14 }) => ( |
| 67 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 68 |
<rect x="3" y="3" width="7" height="7" rx="1.5" /> |
| 69 |
<rect x="14" y="3" width="7" height="7" rx="1.5" /> |
| 70 |
<rect x="3" y="14" width="7" height="7" rx="1.5" /> |
| 71 |
<rect x="14" y="14" width="7" height="7" rx="1.5" /> |
| 72 |
</svg> |
| 73 |
); |
| 74 |
|
| 75 |
export const IconClock = ({ size = 14 }) => ( |
| 76 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 77 |
<circle cx="12" cy="12" r="9" /> |
| 78 |
<polyline points="12 7 12 12 15.5 14" /> |
| 79 |
</svg> |
| 80 |
); |
| 81 |
|
| 82 |
/** |
| 83 |
* The note beside a token-mode payload. Informational, not a warning triangle: |
| 84 |
* using the connection token is a supported choice, only a narrower one. |
| 85 |
*/ |
| 86 |
export const IconInfo = ({ size = 14 }) => ( |
| 87 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 88 |
<circle cx="12" cy="12" r="10" /> |
| 89 |
<path d="M12 16v-4M12 8h.01" /> |
| 90 |
</svg> |
| 91 |
); |
| 92 |
|
| 93 |
export const IconExternal = ({ size = 13 }) => ( |
| 94 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 95 |
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /> |
| 96 |
<polyline points="15 3 21 3 21 9" /> |
| 97 |
<line x1="10" y1="14" x2="21" y2="3" /> |
| 98 |
</svg> |
| 99 |
); |
| 100 |
|
| 101 |
export const IconChevron = ({ open = false, size = 14 }) => ( |
| 102 |
<svg |
| 103 |
width={size} |
| 104 |
height={size} |
| 105 |
viewBox="0 0 24 24" |
| 106 |
fill="none" |
| 107 |
stroke="currentColor" |
| 108 |
strokeWidth="2" |
| 109 |
strokeLinecap="round" |
| 110 |
strokeLinejoin="round" |
| 111 |
aria-hidden="true" |
| 112 |
style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform .15s" }} |
| 113 |
> |
| 114 |
<polyline points="6 9 12 15 18 9" /> |
| 115 |
</svg> |
| 116 |
); |
| 117 |
|
| 118 |
/* ---------------------------------------------------------- client marks */ |
| 119 |
|
| 120 |
/** |
| 121 |
* The marks of the clients the cards offer, in two kinds. |
| 122 |
* |
| 123 |
* `IconClaude` and `IconOpenAI` are the vendors' own published logo files, used |
| 124 |
* exactly as published — path, viewBox and fill unchanged — each keeping its own |
| 125 |
* colour on a white tile, which is why neither uses `currentColor` (ADR-066). |
| 126 |
* Do not recolour, re-draw or re-grid them: an approximation of somebody else's |
| 127 |
* logo is precisely what that decision exists to undo. |
| 128 |
* |
| 129 |
* The rest are ours, on the shared 24-unit grid, and inherit `currentColor` so |
| 130 |
* the card sets the accent. `MCPManager::client_mark()` carries the same five |
| 131 |
* marks for the consent screen: change one and change both. |
| 132 |
*/ |
| 133 |
export const IconClaude = ({ size = 18 }) => ( |
| 134 |
<svg width={size} height={size} viewBox="0 0 100 100" fill="hsl(14.8, 63.1%, 59.6%)" aria-hidden="true"> |
| 135 |
<path d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z" /> |
| 136 |
</svg> |
| 137 |
); |
| 138 |
|
| 139 |
export const IconChatGpt = ({ size = 18 }) => ( |
| 140 |
<svg width={size} height={size} viewBox="0 0 320 320" fill="#000000" aria-hidden="true"> |
| 141 |
<path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" /> |
| 142 |
</svg> |
| 143 |
); |
| 144 |
|
| 145 |
// The same closed arrow, filled rather than stroked: on a solid tile it knocks |
| 146 |
// out as a glyph, not as a hairline outline. |
| 147 |
export const IconCursor = ({ size = 18 }) => ( |
| 148 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> |
| 149 |
<path d="M4 3l16 7-6.6 2.4L11 20 4 3z" /> |
| 150 |
</svg> |
| 151 |
); |
| 152 |
|
| 153 |
export const IconCode = ({ size = 18 }) => ( |
| 154 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 155 |
<polyline points="16 18 22 12 16 6" /> |
| 156 |
<polyline points="8 6 2 12 8 18" /> |
| 157 |
</svg> |
| 158 |
); |
| 159 |
|
| 160 |
export const IconSpark = ({ size = 18 }) => ( |
| 161 |
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> |
| 162 |
<path d="M12 3v18M3 12h18M6.3 6.3l11.4 11.4M17.7 6.3L6.3 17.7" /> |
| 163 |
</svg> |
| 164 |
); |
| 165 |
|
