@coinbase/cds-mcp-server 9.7.1 → 9.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.8.0 ((7/23/2026, 11:18 AM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
15
|
+
## 9.7.2 ((7/23/2026, 10:17 AM PST))
|
|
16
|
+
|
|
17
|
+
This is an artificial version bump with no new change.
|
|
18
|
+
|
|
11
19
|
## 9.7.1 ((7/22/2026, 01:58 PM PST))
|
|
12
20
|
|
|
13
21
|
This is an artificial version bump with no new change.
|
|
@@ -41,6 +41,30 @@ Mobile apps cache font files in the native build, so you must rebuild your app a
|
|
|
41
41
|
</VStack>
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
+
### Custom icon sets
|
|
45
|
+
|
|
46
|
+
Most apps only need the default `Icon`. If you have your own icon font, `createIcon` builds a matching, fully-typed `Icon` for it that reuses the same sizing, color, and accessibility behavior — only the glyphs, font, and `name` type change. Support for building your own icon set is expected to become more self-service over time.
|
|
47
|
+
|
|
48
|
+
```jsx
|
|
49
|
+
import { createIcon } from '@coinbase/cds-mobile/icons';
|
|
50
|
+
// Your icon font's glyph map and icon-name type
|
|
51
|
+
import { glyphMap } from '@my-org/icons/glyphMap';
|
|
52
|
+
import type { MyIconName } from '@my-org/icons';
|
|
53
|
+
|
|
54
|
+
export const MyIcon = createIcon<MyIconName>({
|
|
55
|
+
glyphMap,
|
|
56
|
+
fontFamily: 'MyIcons',
|
|
57
|
+
});
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
```jsx
|
|
61
|
+
<MyIcon name="rocket" size="l" active />
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
The `glyphMap` must be keyed by `` `${name}-${size}-${active | inactive}` `` (where `size` is `12`, `16`, or `24`), with each value the single font glyph character — the same shape as `@coinbase/cds-icons`. Load your font before rendering (for example with `expo-font`'s `useFonts`) using the same family name you pass as `fontFamily`. Because mobile bundles fonts into the native build, rebuild your app after adding a new font.
|
|
65
|
+
|
|
66
|
+
If your icon set uses a different key format or size model, pass a `getGlyph` resolver to `createIcon` to control exactly how a glyph is looked up from the map.
|
|
67
|
+
|
|
44
68
|
## Props
|
|
45
69
|
|
|
46
70
|
| Prop | Type | Required | Default | Description |
|
|
@@ -51,8 +75,9 @@ Mobile apps cache font files in the native build, so you must rebuild your app a
|
|
|
51
75
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Color of the icon when used as a foreground. |
|
|
52
76
|
| `dangerouslySetColor` | `string \| AnimatedInterpolation<string>` | No | `-` | - |
|
|
53
77
|
| `fallback` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `null` | Fallback element to render if unable to find an icon with matching name |
|
|
78
|
+
| `ref` | `null \| (instance: Text \| null) => void \| (() => VoidOrUndefinedOnly) \| RefObject<Text \| null>` | No | `-` | - |
|
|
54
79
|
| `size` | `xs \| s \| m \| l` | No | `m` | Size for a given icon. |
|
|
55
|
-
| `style` | `false \| \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` |
|
|
80
|
+
| `style` | `false \| \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | Custom style applied to the outer container. |
|
|
56
81
|
| `styles` | `{ root?: StyleProp<ViewStyle>; icon?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the Icon component |
|
|
57
82
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
58
83
|
|
|
@@ -35,6 +35,93 @@ import { Icon } from '@coinbase/cds-web/icons/Icon'
|
|
|
35
35
|
</VStack>
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
+
### Custom icon sets
|
|
39
|
+
|
|
40
|
+
Most apps only need the default `Icon`. If you have your own icon font, `createIcon` builds a matching, fully-typed `Icon` for it that reuses the same sizing, color, and accessibility behavior — only the glyphs, font, and `name` type change. Support for building your own icon set is expected to become more self-service over time.
|
|
41
|
+
|
|
42
|
+
```jsx
|
|
43
|
+
import { createIcon } from '@coinbase/cds-web/icons';
|
|
44
|
+
// Your icon font's glyph map and icon-name type
|
|
45
|
+
import { glyphMap } from '@my-org/icons/glyphMap';
|
|
46
|
+
import type { MyIconName } from '@my-org/icons';
|
|
47
|
+
|
|
48
|
+
export const MyIcon = createIcon<MyIconName>({
|
|
49
|
+
glyphMap,
|
|
50
|
+
fontFamily: 'MyIcons',
|
|
51
|
+
});
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
```jsx
|
|
55
|
+
<MyIcon name="rocket" size="l" active />
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The `glyphMap` must be keyed by `` `${name}-${size}-${active | inactive}` `` (where `size` is `12`, `16`, or `24`), with each value the single font glyph character — the same shape as `@coinbase/cds-icons`. Load your font's stylesheet once at your app entry so the `fontFamily` you pass is registered:
|
|
59
|
+
|
|
60
|
+
```jsx
|
|
61
|
+
import '@my-org/icons/fonts/web/icon-font.css';
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
If your icon set uses a different key format or size model, pass a `getGlyph` resolver to `createIcon` to control exactly how a glyph is looked up from the map.
|
|
65
|
+
|
|
66
|
+
On web the font family is applied via the `--cds-icon-font-family` CSS variable (its default is `CoinbaseIcons`). Beyond passing `fontFamily` to `createIcon`, you can override the font per instance through `classNames`/`styles`, or scope it on an ancestor by setting that variable.
|
|
67
|
+
|
|
68
|
+
#### Live demo
|
|
69
|
+
|
|
70
|
+
The example below binds `createIcon` to Google's Material Icons font. The glyph map is built inline from Material's codepoints, but in a real app you'd import a generated map from your icon package. Notice `MaterialIcon` reuses the exact same sizing, color, and accessibility behavior as the default CDS `Icon` — only the font and glyphs differ. Edit the code to try other icons or sizes.
|
|
71
|
+
|
|
72
|
+
```jsx live noInline
|
|
73
|
+
// Material Icons codepoints (private-use area). In a real app this comes from
|
|
74
|
+
// your icon package's generated glyph map.
|
|
75
|
+
const codepoints = {
|
|
76
|
+
home: 0xe88a,
|
|
77
|
+
settings: 0xe8b8,
|
|
78
|
+
search: 0xe8b6,
|
|
79
|
+
favorite: 0xe87d,
|
|
80
|
+
delete: 0xe872,
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
// Build a CDS-shaped glyph map: `${name}-${size}-${state}` -> glyph character
|
|
84
|
+
const glyphMap = Object.fromEntries(
|
|
85
|
+
Object.keys(codepoints).flatMap((name) =>
|
|
86
|
+
[12, 16, 24].flatMap((size) =>
|
|
87
|
+
['active', 'inactive'].map((state) => [
|
|
88
|
+
`${name}-${size}-${state}`,
|
|
89
|
+
String.fromCodePoint(codepoints[name]),
|
|
90
|
+
]),
|
|
91
|
+
),
|
|
92
|
+
),
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
// A second, fully-typed Icon backed by a different font
|
|
96
|
+
const MaterialIcon = createIcon({ glyphMap, fontFamily: 'Material Icons' });
|
|
97
|
+
|
|
98
|
+
function Demo() {
|
|
99
|
+
return (
|
|
100
|
+
<VStack gap={4}>
|
|
101
|
+
{/* Loads the Material Icons web font for this demo */}
|
|
102
|
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
|
103
|
+
<HStack alignItems="center" gap={3}>
|
|
104
|
+
{['xs', 's', 'm', 'l'].map((size) => (
|
|
105
|
+
<MaterialIcon key={size} color="fgPrimary" name="home" size={size} />
|
|
106
|
+
))}
|
|
107
|
+
</HStack>
|
|
108
|
+
<HStack alignItems="flex-start" flexWrap="wrap" gap={4}>
|
|
109
|
+
{Object.keys(codepoints).map((name) => (
|
|
110
|
+
<VStack key={name} alignItems="center" gap={1}>
|
|
111
|
+
<MaterialIcon color="fgPrimary" name={name} size="l" />
|
|
112
|
+
<Text color="fgMuted" font="legal">
|
|
113
|
+
{name}
|
|
114
|
+
</Text>
|
|
115
|
+
</VStack>
|
|
116
|
+
))}
|
|
117
|
+
</HStack>
|
|
118
|
+
</VStack>
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
render(<Demo />);
|
|
123
|
+
```
|
|
124
|
+
|
|
38
125
|
## Props
|
|
39
126
|
|
|
40
127
|
| Prop | Type | Required | Default | Description |
|