@coinbase/cds-mobile 9.18.0 → 9.19.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.19.0 (8/20/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support custom icon sets in name-prop components. [[#848](https://github.com/coinbase/cds/pull/848)]
+
 ## 9.18.0 (8/19/2026 PST)
 
 #### 🚀 Updates

package/dts/icons/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAGpE,OAAO,EAGL,iBAAiB,EACjB,KAAK,aAAa,IAAI,oBAAoB,EAC1C,KAAK,SAAS,IAAI,gBAAgB,EACnC,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAEnD,eAAO,MAAM,IAAI;;;;;;;;;;;YAMitG,CAAC;YAAyE,CAAC;;;;kWAH3yG,CAAC;AAEH,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAGpE,OAAO,EAGL,iBAAiB,EACjB,KAAK,aAAa,IAAI,oBAAoB,EAC1C,KAAK,SAAS,IAAI,gBAAgB,EACnC,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAEnD,eAAO,MAAM,IAAI;;;;;;;;;;;YAMohH,CAAC;YAAyE,CAAC;;;;kWAH9mH,CAAC;AAEH,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dts/icons/createIcon.d.ts

@@ -14,31 +14,21 @@ import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import type { PaddingProps } from '@coinbase/cds-common/types/SpacingProps';
 /** Default font family for the CDS icon glyph font. */
 export declare const DEFAULT_ICON_FONT_FAMILY = 'CoinbaseIcons';
-/**
- * Shape of the glyph map an icon set must provide. Keys are
- * `${name}-${sourcePixelSize}-${'active' | 'inactive'}` and values are the
- * single Unicode character rendered in the icon font.
- */
+/** Values are the single character to render in the icon font. */
 export type GlyphMap<Name extends string> = Record<
   `${Name}-${IconSourcePixelSize}-${'active' | 'inactive'}`,
   string
 >;
-/** Arguments passed to a glyph resolver to look up an icon's glyph. */
 export type IconGlyphResolverArgs<Name extends string> = {
-  /** Glyph map bound to this icon set. */
   glyphMap: GlyphMap<Name>;
-  /** Icon name requested via the `name` prop. */
   name: Name;
-  /** Size token requested via the `size` prop. */
   size: IconSize;
-  /** Resolved pixel size from the theme (includes device font scaling). */
+  /** Pixel size resolved from the theme, including device font scaling. */
   pixelSize: number;
-  /** Whether the active variant was requested. */
   active: boolean;
 };
-/** Configuration used to bind an icon set to a typed `Icon` component. */
-export type CreateIconConfig<Name extends string> = {
-  /** Generated glyph map for this icon set. */
+/** An icon font and the glyphs it provides. */
+export type IconGlyphSource<Name extends string = string> = {
   glyphMap: GlyphMap<Name>;
   /**
    * Font family registered by the icon set's font (loaded via `expo-font`).
@@ -46,13 +36,30 @@ export type CreateIconConfig<Name extends string> = {
    */
   fontFamily?: string;
   /**
-   * Resolves the glyph to render for an icon from the glyph map. Override to
-   * support a custom key format or size model. Defaults to the CDS scheme:
-   * `${name}-${sourceSize}-${'active' | 'inactive'}`, where `sourceSize` is
-   * `12`, `16`, or `24`.
+   * Override to use a custom key format or size model. Defaults to the CDS
+   * scheme: `${name}-${sourceSize}-${state}`, with `sourceSize` 12, 16, or 24.
    */
   getGlyph?: (args: IconGlyphResolverArgs<Name>) => string | undefined;
 };
+export type IconGlyphSourceProviderProps = {
+  /**
+   * Consulted before the built-in glyphs. A nested provider replaces it. Its
+   * font must be loaded (e.g. via `expo-font`).
+   */
+  source: IconGlyphSource<any>;
+  children: React.ReactNode;
+};
+/**
+ * Adds a custom glyph source to every CDS icon rendered below.
+ *
+ * Scope this to a subtree: a source reusing a built-in name re-skins that icon
+ * everywhere below, including icons CDS renders internally (`close`, `caretUp`,
+ * `checkmark`). Its names must be names the icon component already accepts.
+ */
+export declare function IconGlyphSourceProvider({
+  source,
+  children,
+}: IconGlyphSourceProviderProps): import('react/jsx-runtime').JSX.Element;
 export type IconBaseProps<Name extends string = string> = SharedProps &
   PaddingProps &
   Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'> &
@@ -97,18 +104,10 @@ export type IconProps<Name extends string = string> = IconBaseProps<Name> & {
   };
 };
 declare const getIconSourceSize: (iconSize: number) => IconSourcePixelSize;
-/**
- * Creates a typed `Icon` component bound to a specific icon set (glyph map,
- * font family, and name union). The default CDS `Icon` is created from this
- * factory; consumers with their own icon package can create their own typed
- * icon component that reuses all of the CDS rendering, accessibility, and
- * theming behavior.
- */
-export declare function createIcon<Name extends string>({
-  glyphMap,
-  fontFamily,
-  getGlyph,
-}: CreateIconConfig<Name>): React.MemoExoticComponent<
+/** Creates a typed `Icon` component bound to an icon set. */
+export declare function createIcon<Name extends string>(
+  source: IconGlyphSource<Name>,
+): React.MemoExoticComponent<
   ({
     ref,
     ..._props

package/dts/icons/createIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/icons/createIcon.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/icons/createIcon.tsx"],"names":[],"mappings":"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"}

package/dts/icons/index.d.ts

@@ -1,6 +1,11 @@
+export type {
+  GlyphMap,
+  IconGlyphResolverArgs,
+  IconGlyphSource,
+  IconGlyphSourceProviderProps,
+} from './createIcon';
+export { createIcon, DEFAULT_ICON_FONT_FAMILY, IconGlyphSourceProvider } from './createIcon';
 export * from './Icon';
-export { createIcon, DEFAULT_ICON_FONT_FAMILY } from './createIcon';
-export type { CreateIconConfig, GlyphMap, IconGlyphResolverArgs } from './createIcon';
 export * from './LogoMark';
 export * from './LogoWordmark';
 export * from './SubBrandLogoMark';

package/dts/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACtF,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,QAAQ,EACR,qBAAqB,EACrB,eAAe,EACf,4BAA4B,GAC7B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC7F,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC"}

package/esm/icons/createIcon.js

@@ -1,6 +1,7 @@
 const _excluded = ["ref"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { memo, useMemo } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { createContext, memo, useContext, useMemo } from 'react';
 import { Animated, Text, useWindowDimensions } from 'react-native';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -11,16 +12,28 @@ import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DEFAULT_ICON_FONT_FAMILY = 'CoinbaseIcons';
 
-/**
- * Shape of the glyph map an icon set must provide. Keys are
- * `${name}-${sourcePixelSize}-${'active' | 'inactive'}` and values are the
- * single Unicode character rendered in the icon font.
- */
+/** Values are the single character to render in the icon font. */
 
-/** Arguments passed to a glyph resolver to look up an icon's glyph. */
-
-/** Configuration used to bind an icon set to a typed `Icon` component. */
+/** An icon font and the glyphs it provides. */
 
+const IconGlyphSourceContext = /*#__PURE__*/createContext(undefined);
+/**
+ * Adds a custom glyph source to every CDS icon rendered below.
+ *
+ * Scope this to a subtree: a source reusing a built-in name re-skins that icon
+ * everywhere below, including icons CDS renders internally (`close`, `caretUp`,
+ * `checkmark`). Its names must be names the icon component already accepts.
+ */
+export function IconGlyphSourceProvider(_ref) {
+  let {
+    source,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(IconGlyphSourceContext.Provider, {
+    value: source,
+    children: children
+  });
+}
 const getIconSourceSize = iconSize => {
   if (iconSize <= 12) return 12;
   if (iconSize <= 16) return 16;
@@ -28,31 +41,35 @@ const getIconSourceSize = iconSize => {
 };
 
 /** Default glyph resolver using the CDS `${name}-${sourceSize}-${state}` key scheme. */
-const defaultGetGlyph = _ref => {
+const defaultGetGlyph = _ref2 => {
   let {
     glyphMap,
     name,
     pixelSize,
     active
-  } = _ref;
+  } = _ref2;
   const sourceSize = getIconSourceSize(pixelSize);
   const key = name + "-" + sourceSize + "-" + (active ? 'active' : 'inactive');
   return glyphMap[key];
 };
+/** Resolves a glyph from one source, with that source's font. */
+const resolveFromSource = (source, args) => {
+  var _source$getGlyph, _source$fontFamily;
+  const char = ((_source$getGlyph = source.getGlyph) != null ? _source$getGlyph : defaultGetGlyph)(_extends({}, args, {
+    glyphMap: source.glyphMap
+  }));
+  return char === undefined ? undefined : {
+    char,
+    fontFamily: (_source$fontFamily = source.fontFamily) != null ? _source$fontFamily : DEFAULT_ICON_FONT_FAMILY
+  };
+};
+const resolveGlyph = (contextSource, boundSource, args) => {
+  const fromContext = contextSource ? resolveFromSource(contextSource, args) : undefined;
+  return fromContext != null ? fromContext : resolveFromSource(boundSource, args);
+};
 
-/**
- * Creates a typed `Icon` component bound to a specific icon set (glyph map,
- * font family, and name union). The default CDS `Icon` is created from this
- * factory; consumers with their own icon package can create their own typed
- * icon component that reuses all of the CDS rendering, accessibility, and
- * theming behavior.
- */
-export function createIcon(_ref2) {
-  let {
-    glyphMap,
-    fontFamily = DEFAULT_ICON_FONT_FAMILY,
-    getGlyph = defaultGetGlyph
-  } = _ref2;
+/** Creates a typed `Icon` component bound to an icon set. */
+export function createIcon(source) {
   const Icon = /*#__PURE__*/memo(_ref3 => {
     let {
         ref
@@ -89,6 +106,15 @@ export function createIcon(_ref2) {
     const iconSize = allowFontScaling ? theme.iconSize[size] * fontScale : theme.iconSize[size];
     const iconColor = theme.color[color];
     const finalColor = dangerouslySetColor != null ? dangerouslySetColor : iconColor;
+
+    // Tried before the bound set, so a source can override a built-in icon.
+    const contextSource = useContext(IconGlyphSourceContext);
+    const resolved = resolveGlyph(contextSource, source, {
+      name,
+      size,
+      pixelSize: iconSize,
+      active: Boolean(active)
+    });
     const rootStyle = useMemo(() => {
       var _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1;
       return [{
@@ -98,22 +124,18 @@ export function createIcon(_ref2) {
         paddingStart: theme.space[(_ref0 = (_ref1 = paddingStart != null ? paddingStart : paddingX) != null ? _ref1 : padding) != null ? _ref0 : 0]
       }, style, styles == null ? void 0 : styles.root];
     }, [style, theme.space, padding, paddingX, paddingY, paddingTop, paddingEnd, paddingBottom, paddingStart, styles == null ? void 0 : styles.root]);
+
+    // The matching source decides the font, so a source covering only some
+    // sizes or states of a name mixes fonts across that name.
     const iconStyle = useMemo(() => [{
-      fontFamily,
+      fontFamily: resolved == null ? void 0 : resolved.fontFamily,
       fontSize: iconSize,
       height: iconSize,
       width: iconSize,
       lineHeight: iconSize,
       color: finalColor
-    }, styles == null ? void 0 : styles.icon], [finalColor, iconSize, styles == null ? void 0 : styles.icon]);
-    const glyph = getGlyph({
-      glyphMap,
-      name,
-      size,
-      pixelSize: iconSize,
-      active: Boolean(active)
-    });
-    if (glyph === undefined) {
+    }, styles == null ? void 0 : styles.icon], [finalColor, iconSize, resolved == null ? void 0 : resolved.fontFamily, styles == null ? void 0 : styles.icon]);
+    if (resolved === undefined) {
       if (isDevelopment()) {
         console.error("Unable to find glyph for icon \"" + name + "\" at size \"" + size + "\"");
       }
@@ -135,7 +157,7 @@ export function createIcon(_ref2) {
         // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
         ,
         style: iconStyle,
-        children: glyph
+        children: resolved.char
       })
     });
   });

package/esm/icons/index.js

@@ -1,5 +1,5 @@
+export { createIcon, DEFAULT_ICON_FONT_FAMILY, IconGlyphSourceProvider } from './createIcon';
 export * from './Icon';
-export { createIcon, DEFAULT_ICON_FONT_FAMILY } from './createIcon';
 export * from './LogoMark';
 export * from './LogoWordmark';
 export * from './SubBrandLogoMark';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.18.0",
+  "version": "9.19.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,8 +218,8 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.18.0",
-    "@coinbase/cds-icons": "^5.21.0",
+    "@coinbase/cds-common": "^9.19.0",
+    "@coinbase/cds-icons": "^5.22.0",
     "@coinbase/cds-illustrations": "^4.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",