@ankhorage/surface 9.0.4 → 9.0.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @ankhorage/surface
 
+## 9.0.6
+
+### Patch Changes
+
+- a4d56dd: Render Surface icons through a native-free web adapter using the official React Native Vector Icons
+  glyphmaps and fonts, preventing browser bundles from reaching React Native codegen modules.
+
+## 9.0.5
+
+### Patch Changes
+
+- 233f5ea: Update Ankhorage dependencies: `@ankhorage/contracts`.
+
 ## 9.0.4
 
 ### Patch Changes

package/dist/features/icon/adapters/inbound/PortableIcon.web.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Image, Text } from 'react-native';
+import type { FontIconSource, SvgIconSource } from '../../../../types/icon';
+interface PortableIconPresentationProps {
+    readonly color: string;
+    readonly size: number;
+    readonly testID?: string;
+}
+type WebPortableIconProps = (FontIconSource & PortableIconPresentationProps & {
+    readonly style?: React.ComponentProps<typeof Text>['style'];
+}) | (SvgIconSource & PortableIconPresentationProps & {
+    readonly style?: React.ComponentProps<typeof Image>['style'];
+});
+/*** Renders Surface icons on web without React Native native modules or SVG codegen. */
+export declare function PortableIcon(props: WebPortableIconProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PortableIcon.web.d.ts.map

package/dist/features/icon/adapters/inbound/PortableIcon.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortableIcon.web.d.ts","sourceRoot":"","sources":["../../../../../src/features/icon/adapters/inbound/PortableIcon.web.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAE3D,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAc5E,UAAU,6BAA6B;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,KAAK,oBAAoB,GACrB,CAAC,cAAc,GACb,6BAA6B,GAAG;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;CAC7D,CAAC,GACJ,CAAC,aAAa,GACZ,6BAA6B,GAAG;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;CAC9D,CAAC,CAAC;AAET,wFAAwF;AACxF,wBAAgB,YAAY,CAAC,KAAK,EAAE,oBAAoB,qBAGvD"}

package/dist/features/icon/adapters/inbound/PortableIcon.web.js

@@ -0,0 +1,173 @@
+import fontAwesomeFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';
+import fontAwesomeGlyphs from '@react-native-vector-icons/fontawesome/glyphmaps/FontAwesome.json';
+import fontAwesome5BrandFont from '@react-native-vector-icons/fontawesome5/fonts/FontAwesome5_Brands.ttf';
+import fontAwesome5RegularFont from '@react-native-vector-icons/fontawesome5/fonts/FontAwesome5_Regular.ttf';
+import fontAwesome5SolidFont from '@react-native-vector-icons/fontawesome5/fonts/FontAwesome5_Solid.ttf';
+import fontAwesome5BrandGlyphs from '@react-native-vector-icons/fontawesome5/glyphmaps/FontAwesome5_brand.json';
+import fontAwesome5RegularGlyphs from '@react-native-vector-icons/fontawesome5/glyphmaps/FontAwesome5_regular.json';
+import fontAwesome5SolidGlyphs from '@react-native-vector-icons/fontawesome5/glyphmaps/FontAwesome5_solid.json';
+import fontAwesome6BrandFont from '@react-native-vector-icons/fontawesome6/fonts/FontAwesome6_Brands.ttf';
+import fontAwesome6RegularFont from '@react-native-vector-icons/fontawesome6/fonts/FontAwesome6_Regular.ttf';
+import fontAwesome6SolidFont from '@react-native-vector-icons/fontawesome6/fonts/FontAwesome6_Solid.ttf';
+import fontAwesome6BrandGlyphs from '@react-native-vector-icons/fontawesome6/glyphmaps/FontAwesome6_brand.json';
+import fontAwesome6RegularGlyphs from '@react-native-vector-icons/fontawesome6/glyphmaps/FontAwesome6_regular.json';
+import fontAwesome6SolidGlyphs from '@react-native-vector-icons/fontawesome6/glyphmaps/FontAwesome6_solid.json';
+import ioniconsFont from '@react-native-vector-icons/ionicons/fonts/Ionicons.ttf';
+import ioniconsGlyphs from '@react-native-vector-icons/ionicons/glyphmaps/Ionicons.json';
+import materialDesignFont from '@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf';
+import materialDesignGlyphs from '@react-native-vector-icons/material-design-icons/glyphmaps/MaterialDesignIcons.json';
+import React from 'react';
+import { Image, Text } from 'react-native';
+const FONT_AWESOME_GLYPHS = new Map(Object.entries(fontAwesomeGlyphs));
+const FONT_AWESOME_5_BRAND_GLYPHS = new Map(Object.entries(fontAwesome5BrandGlyphs));
+const FONT_AWESOME_5_REGULAR_GLYPHS = new Map(Object.entries(fontAwesome5RegularGlyphs));
+const FONT_AWESOME_5_SOLID_GLYPHS = new Map(Object.entries(fontAwesome5SolidGlyphs));
+const FONT_AWESOME_6_BRAND_GLYPHS = new Map(Object.entries(fontAwesome6BrandGlyphs));
+const FONT_AWESOME_6_REGULAR_GLYPHS = new Map(Object.entries(fontAwesome6RegularGlyphs));
+const FONT_AWESOME_6_SOLID_GLYPHS = new Map(Object.entries(fontAwesome6SolidGlyphs));
+const IONICONS_GLYPHS = new Map(Object.entries(ioniconsGlyphs));
+const MATERIAL_DESIGN_GLYPHS = new Map(Object.entries(materialDesignGlyphs));
+/*** Renders Surface icons on web without React Native native modules or SVG codegen. */
+export function PortableIcon(props) {
+    if ('source' in props)
+        return <WebSvgIcon {...props}/>;
+    return <WebFontIcon {...props}/>;
+}
+/*** Renders one RNVI glyph through the same font and codepoint used by native. */
+function WebFontIcon(props) {
+    const definition = resolveFontDefinition(props);
+    useWebFont(definition);
+    const codepoint = definition.glyphs.get(props.name);
+    if (codepoint === undefined)
+        return null;
+    return (<Text accessibilityElementsHidden aria-hidden style={[
+            props.style,
+            {
+                color: props.color,
+                fontFamily: definition.family,
+                fontSize: props.size,
+                fontWeight: definition.weight,
+                height: props.size,
+                lineHeight: props.size,
+                width: props.size,
+            },
+        ]} testID={props.testID}>
+      {String.fromCodePoint(codepoint)}
+    </Text>);
+}
+/*** Renders URL and bundled SVG sources through the portable web Image adapter. */
+function WebSvgIcon(props) {
+    const source = typeof props.source === 'string' ? { uri: props.source } : props.source;
+    return (<Image accessibilityElementsHidden source={source} style={[
+            props.style,
+            {
+                height: props.size,
+                tintColor: props.color,
+                width: props.size,
+            },
+        ]} testID={props.testID}/>);
+}
+/*** Resolve the browser font, glyph map, and weight for one existing Surface icon contract. */
+function resolveFontDefinition(source) {
+    const runtimeProvider = source.provider;
+    switch (source.provider) {
+        case undefined:
+        case 'Ionicons':
+            return { family: 'Ionicons', fontUrl: ioniconsFont, glyphs: IONICONS_GLYPHS };
+        case 'FontAwesome':
+            return { family: 'FontAwesome', fontUrl: fontAwesomeFont, glyphs: FONT_AWESOME_GLYPHS };
+        case 'FontAwesome5':
+            return resolveFontAwesome5Definition(source.variant);
+        case 'FontAwesome6':
+            return resolveFontAwesome6Definition(source.variant);
+        case 'MaterialDesignIcons':
+            return {
+                family: 'MaterialDesignIcons',
+                fontUrl: materialDesignFont,
+                glyphs: MATERIAL_DESIGN_GLYPHS,
+            };
+        default:
+            throw new Error(`Unsupported icon provider: ${String(runtimeProvider)}`);
+    }
+}
+/*** Resolve one FontAwesome5 style without invoking RNVI runtime components. */
+function resolveFontAwesome5Definition(variant) {
+    const runtimeVariant = variant;
+    if (runtimeVariant === 'brand') {
+        return {
+            family: 'FontAwesome5Brands-Regular',
+            fontUrl: fontAwesome5BrandFont,
+            glyphs: FONT_AWESOME_5_BRAND_GLYPHS,
+            weight: 400,
+        };
+    }
+    if (runtimeVariant === 'solid') {
+        return {
+            family: 'FontAwesome5Free-Solid',
+            fontUrl: fontAwesome5SolidFont,
+            glyphs: FONT_AWESOME_5_SOLID_GLYPHS,
+            weight: 900,
+        };
+    }
+    if (runtimeVariant !== 'regular') {
+        throw new Error(`Unsupported icon FontAwesome5 variant: ${String(runtimeVariant)}`);
+    }
+    return {
+        family: 'FontAwesome5Free-Regular',
+        fontUrl: fontAwesome5RegularFont,
+        glyphs: FONT_AWESOME_5_REGULAR_GLYPHS,
+        weight: 400,
+    };
+}
+/*** Resolve one FontAwesome6 style without invoking RNVI runtime components. */
+function resolveFontAwesome6Definition(variant) {
+    const runtimeVariant = variant;
+    if (runtimeVariant === 'brand') {
+        return {
+            family: 'FontAwesome6Brands-Regular',
+            fontUrl: fontAwesome6BrandFont,
+            glyphs: FONT_AWESOME_6_BRAND_GLYPHS,
+            weight: 400,
+        };
+    }
+    if (runtimeVariant === 'solid') {
+        return {
+            family: 'FontAwesome6Free-Solid',
+            fontUrl: fontAwesome6SolidFont,
+            glyphs: FONT_AWESOME_6_SOLID_GLYPHS,
+            weight: 900,
+        };
+    }
+    if (runtimeVariant !== 'regular') {
+        throw new Error(`Unsupported icon FontAwesome6 variant: ${String(runtimeVariant)}`);
+    }
+    return {
+        family: 'FontAwesome6Free-Regular',
+        fontUrl: fontAwesome6RegularFont,
+        glyphs: FONT_AWESOME_6_REGULAR_GLYPHS,
+        weight: 400,
+    };
+}
+/*** Register one icon font once before browser layout uses its glyphs. */
+function useWebFont(definition) {
+    React.useInsertionEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const id = createFontStyleId(definition);
+        if (document.getElementById(id) !== null)
+            return;
+        const style = document.createElement('style');
+        style.id = id;
+        style.textContent = createFontFaceCss(definition);
+        document.head.appendChild(style);
+    }, [definition.family, definition.fontUrl, definition.weight]);
+}
+/*** Create a stable DOM id for one font face variant. */
+function createFontStyleId(definition) {
+    return `surface-icon-font-${definition.family}-${definition.weight ?? 'normal'}`;
+}
+/*** Create the browser font-face rule used by the portable font icon adapter. */
+function createFontFaceCss(definition) {
+    return `@font-face{font-family:"${definition.family}";src:url("${definition.fontUrl}") format("truetype");font-style:normal;font-weight:${definition.weight ?? 400};font-display:block;}`;
+}
+//# sourceMappingURL=PortableIcon.web.js.map

package/dist/features/icon/adapters/inbound/PortableIcon.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortableIcon.web.js","sourceRoot":"","sources":["../../../../../src/features/icon/adapters/inbound/PortableIcon.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import fontAwesomeFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';\nimport fontAwesomeGlyphs from '@react-native-vector-icons/fontawesome/glyphmaps/FontAwesome.json';\nimport fontAwesome5BrandFont from '@react-native-vector-icons/fontawesome5/fonts/FontAwesome5_Brands.ttf';\nimport fontAwesome5RegularFont from '@react-native-vector-icons/fontawesome5/fonts/FontAwesome5_Regular.ttf';\nimport fontAwesome5SolidFont from '@react-native-vector-icons/fontawesome5/fonts/FontAwesome5_Solid.ttf';\nimport fontAwesome5BrandGlyphs from '@react-native-vector-icons/fontawesome5/glyphmaps/FontAwesome5_brand.json';\nimport fontAwesome5RegularGlyphs from '@react-native-vector-icons/fontawesome5/glyphmaps/FontAwesome5_regular.json';\nimport fontAwesome5SolidGlyphs from '@react-native-vector-icons/fontawesome5/glyphmaps/FontAwesome5_solid.json';\nimport fontAwesome6BrandFont from '@react-native-vector-icons/fontawesome6/fonts/FontAwesome6_Brands.ttf';\nimport fontAwesome6RegularFont from '@react-native-vector-icons/fontawesome6/fonts/FontAwesome6_Regular.ttf';\nimport fontAwesome6SolidFont from '@react-native-vector-icons/fontawesome6/fonts/FontAwesome6_Solid.ttf';\nimport fontAwesome6BrandGlyphs from '@react-native-vector-icons/fontawesome6/glyphmaps/FontAwesome6_brand.json';\nimport fontAwesome6RegularGlyphs from '@react-native-vector-icons/fontawesome6/glyphmaps/FontAwesome6_regular.json';\nimport fontAwesome6SolidGlyphs from '@react-native-vector-icons/fontawesome6/glyphmaps/FontAwesome6_solid.json';\nimport ioniconsFont from '@react-native-vector-icons/ionicons/fonts/Ionicons.ttf';\nimport ioniconsGlyphs from '@react-native-vector-icons/ionicons/glyphmaps/Ionicons.json';\nimport materialDesignFont from '@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf';\nimport materialDesignGlyphs from '@react-native-vector-icons/material-design-icons/glyphmaps/MaterialDesignIcons.json';\nimport React from 'react';\nimport { Image, Text, type TextStyle } from 'react-native';\n\nimport type { FontIconSource, SvgIconSource } from '../../../../types/icon';\n\ntype GlyphMap = ReadonlyMap<string, number>;\n\nconst FONT_AWESOME_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesomeGlyphs));\nconst FONT_AWESOME_5_BRAND_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome5BrandGlyphs));\nconst FONT_AWESOME_5_REGULAR_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome5RegularGlyphs));\nconst FONT_AWESOME_5_SOLID_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome5SolidGlyphs));\nconst FONT_AWESOME_6_BRAND_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome6BrandGlyphs));\nconst FONT_AWESOME_6_REGULAR_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome6RegularGlyphs));\nconst FONT_AWESOME_6_SOLID_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome6SolidGlyphs));\nconst IONICONS_GLYPHS: GlyphMap = new Map(Object.entries(ioniconsGlyphs));\nconst MATERIAL_DESIGN_GLYPHS: GlyphMap = new Map(Object.entries(materialDesignGlyphs));\n\ninterface PortableIconPresentationProps {\n  readonly color: string;\n  readonly size: number;\n  readonly testID?: string;\n}\n\ntype WebPortableIconProps =\n  | (FontIconSource &\n      PortableIconPresentationProps & {\n        readonly style?: React.ComponentProps<typeof Text>['style'];\n      })\n  | (SvgIconSource &\n      PortableIconPresentationProps & {\n        readonly style?: React.ComponentProps<typeof Image>['style'];\n      });\n\n/*** Renders Surface icons on web without React Native native modules or SVG codegen. */\nexport function PortableIcon(props: WebPortableIconProps) {\n  if ('source' in props) return <WebSvgIcon {...props} />;\n  return <WebFontIcon {...props} />;\n}\n\ninterface WebFontDefinition {\n  readonly family: string;\n  readonly fontUrl: string;\n  readonly glyphs: GlyphMap;\n  readonly weight?: TextStyle['fontWeight'];\n}\n\n/*** Renders one RNVI glyph through the same font and codepoint used by native. */\nfunction WebFontIcon(\n  props: FontIconSource &\n    PortableIconPresentationProps & {\n      readonly style?: React.ComponentProps<typeof Text>['style'];\n    },\n) {\n  const definition = resolveFontDefinition(props);\n  useWebFont(definition);\n  const codepoint = definition.glyphs.get(props.name);\n  if (codepoint === undefined) return null;\n\n  return (\n    <Text\n      accessibilityElementsHidden\n      aria-hidden\n      style={[\n        props.style,\n        {\n          color: props.color,\n          fontFamily: definition.family,\n          fontSize: props.size,\n          fontWeight: definition.weight,\n          height: props.size,\n          lineHeight: props.size,\n          width: props.size,\n        },\n      ]}\n      testID={props.testID}\n    >\n      {String.fromCodePoint(codepoint)}\n    </Text>\n  );\n}\n\n/*** Renders URL and bundled SVG sources through the portable web Image adapter. */\nfunction WebSvgIcon(\n  props: SvgIconSource &\n    PortableIconPresentationProps & {\n      readonly style?: React.ComponentProps<typeof Image>['style'];\n    },\n) {\n  const source = typeof props.source === 'string' ? { uri: props.source } : props.source;\n  return (\n    <Image\n      accessibilityElementsHidden\n      source={source}\n      style={[\n        props.style,\n        {\n          height: props.size,\n          tintColor: props.color,\n          width: props.size,\n        },\n      ]}\n      testID={props.testID}\n    />\n  );\n}\n\n/*** Resolve the browser font, glyph map, and weight for one existing Surface icon contract. */\nfunction resolveFontDefinition(source: FontIconSource): WebFontDefinition {\n  const runtimeProvider: unknown = source.provider;\n  switch (source.provider) {\n    case undefined:\n    case 'Ionicons':\n      return { family: 'Ionicons', fontUrl: ioniconsFont, glyphs: IONICONS_GLYPHS };\n    case 'FontAwesome':\n      return { family: 'FontAwesome', fontUrl: fontAwesomeFont, glyphs: FONT_AWESOME_GLYPHS };\n    case 'FontAwesome5':\n      return resolveFontAwesome5Definition(source.variant);\n    case 'FontAwesome6':\n      return resolveFontAwesome6Definition(source.variant);\n    case 'MaterialDesignIcons':\n      return {\n        family: 'MaterialDesignIcons',\n        fontUrl: materialDesignFont,\n        glyphs: MATERIAL_DESIGN_GLYPHS,\n      };\n    default:\n      throw new Error(`Unsupported icon provider: ${String(runtimeProvider)}`);\n  }\n}\n\n/*** Resolve one FontAwesome5 style without invoking RNVI runtime components. */\nfunction resolveFontAwesome5Definition(\n  variant: Extract<FontIconSource, { provider: 'FontAwesome5' }>['variant'],\n): WebFontDefinition {\n  const runtimeVariant: unknown = variant;\n  if (runtimeVariant === 'brand') {\n    return {\n      family: 'FontAwesome5Brands-Regular',\n      fontUrl: fontAwesome5BrandFont,\n      glyphs: FONT_AWESOME_5_BRAND_GLYPHS,\n      weight: 400,\n    };\n  }\n  if (runtimeVariant === 'solid') {\n    return {\n      family: 'FontAwesome5Free-Solid',\n      fontUrl: fontAwesome5SolidFont,\n      glyphs: FONT_AWESOME_5_SOLID_GLYPHS,\n      weight: 900,\n    };\n  }\n  if (runtimeVariant !== 'regular') {\n    throw new Error(`Unsupported icon FontAwesome5 variant: ${String(runtimeVariant)}`);\n  }\n  return {\n    family: 'FontAwesome5Free-Regular',\n    fontUrl: fontAwesome5RegularFont,\n    glyphs: FONT_AWESOME_5_REGULAR_GLYPHS,\n    weight: 400,\n  };\n}\n\n/*** Resolve one FontAwesome6 style without invoking RNVI runtime components. */\nfunction resolveFontAwesome6Definition(\n  variant: Extract<FontIconSource, { provider: 'FontAwesome6' }>['variant'],\n): WebFontDefinition {\n  const runtimeVariant: unknown = variant;\n  if (runtimeVariant === 'brand') {\n    return {\n      family: 'FontAwesome6Brands-Regular',\n      fontUrl: fontAwesome6BrandFont,\n      glyphs: FONT_AWESOME_6_BRAND_GLYPHS,\n      weight: 400,\n    };\n  }\n  if (runtimeVariant === 'solid') {\n    return {\n      family: 'FontAwesome6Free-Solid',\n      fontUrl: fontAwesome6SolidFont,\n      glyphs: FONT_AWESOME_6_SOLID_GLYPHS,\n      weight: 900,\n    };\n  }\n  if (runtimeVariant !== 'regular') {\n    throw new Error(`Unsupported icon FontAwesome6 variant: ${String(runtimeVariant)}`);\n  }\n  return {\n    family: 'FontAwesome6Free-Regular',\n    fontUrl: fontAwesome6RegularFont,\n    glyphs: FONT_AWESOME_6_REGULAR_GLYPHS,\n    weight: 400,\n  };\n}\n\n/*** Register one icon font once before browser layout uses its glyphs. */\nfunction useWebFont(definition: WebFontDefinition) {\n  React.useInsertionEffect(() => {\n    if (typeof document === 'undefined') return;\n    const id = createFontStyleId(definition);\n    if (document.getElementById(id) !== null) return;\n\n    const style = document.createElement('style');\n    style.id = id;\n    style.textContent = createFontFaceCss(definition);\n    document.head.appendChild(style);\n  }, [definition.family, definition.fontUrl, definition.weight]);\n}\n\n/*** Create a stable DOM id for one font face variant. */\nfunction createFontStyleId(definition: WebFontDefinition): string {\n  return `surface-icon-font-${definition.family}-${definition.weight ?? 'normal'}`;\n}\n\n/*** Create the browser font-face rule used by the portable font icon adapter. */\nfunction createFontFaceCss(definition: WebFontDefinition): string {\n  return `@font-face{font-family:\"${definition.family}\";src:url(\"${definition.fontUrl}\") format(\"truetype\");font-style:normal;font-weight:${definition.weight ?? 400};font-display:block;}`;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "9.0.4",
+  "version": "9.0.6",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.1",
-    "@ankhorage/contracts": "^22.0.3",
+    "@ankhorage/contracts": "^22.0.4",
     "@ankhorage/utility": "^1.4.0",
     "@gorhom/bottom-sheet": "^5.2.13"
   },

package/src/features/icon/adapters/inbound/PortableIcon.web.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from 'bun:test';
+
+import type { PortableIcon } from './PortableIcon.web';
+
+type WebPortableIcon = typeof PortableIcon;
+
+test('web icon adapter remains a native-free platform boundary', async () => {
+  const portableIconType: WebPortableIcon | undefined = undefined;
+  expect(portableIconType).toBeUndefined();
+
+  const source = await Bun.file('src/features/icon/adapters/inbound/PortableIcon.web.tsx').text();
+
+  expect(source).not.toContain('react-native-svg');
+  expect(source).not.toContain('/static');
+  expect(source).toContain('/glyphmaps/');
+  expect(source).toContain('/fonts/');
+});

package/src/features/icon/adapters/inbound/PortableIcon.web.tsx

@@ -0,0 +1,235 @@
+import fontAwesomeFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';
+import fontAwesomeGlyphs from '@react-native-vector-icons/fontawesome/glyphmaps/FontAwesome.json';
+import fontAwesome5BrandFont from '@react-native-vector-icons/fontawesome5/fonts/FontAwesome5_Brands.ttf';
+import fontAwesome5RegularFont from '@react-native-vector-icons/fontawesome5/fonts/FontAwesome5_Regular.ttf';
+import fontAwesome5SolidFont from '@react-native-vector-icons/fontawesome5/fonts/FontAwesome5_Solid.ttf';
+import fontAwesome5BrandGlyphs from '@react-native-vector-icons/fontawesome5/glyphmaps/FontAwesome5_brand.json';
+import fontAwesome5RegularGlyphs from '@react-native-vector-icons/fontawesome5/glyphmaps/FontAwesome5_regular.json';
+import fontAwesome5SolidGlyphs from '@react-native-vector-icons/fontawesome5/glyphmaps/FontAwesome5_solid.json';
+import fontAwesome6BrandFont from '@react-native-vector-icons/fontawesome6/fonts/FontAwesome6_Brands.ttf';
+import fontAwesome6RegularFont from '@react-native-vector-icons/fontawesome6/fonts/FontAwesome6_Regular.ttf';
+import fontAwesome6SolidFont from '@react-native-vector-icons/fontawesome6/fonts/FontAwesome6_Solid.ttf';
+import fontAwesome6BrandGlyphs from '@react-native-vector-icons/fontawesome6/glyphmaps/FontAwesome6_brand.json';
+import fontAwesome6RegularGlyphs from '@react-native-vector-icons/fontawesome6/glyphmaps/FontAwesome6_regular.json';
+import fontAwesome6SolidGlyphs from '@react-native-vector-icons/fontawesome6/glyphmaps/FontAwesome6_solid.json';
+import ioniconsFont from '@react-native-vector-icons/ionicons/fonts/Ionicons.ttf';
+import ioniconsGlyphs from '@react-native-vector-icons/ionicons/glyphmaps/Ionicons.json';
+import materialDesignFont from '@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf';
+import materialDesignGlyphs from '@react-native-vector-icons/material-design-icons/glyphmaps/MaterialDesignIcons.json';
+import React from 'react';
+import { Image, Text, type TextStyle } from 'react-native';
+
+import type { FontIconSource, SvgIconSource } from '../../../../types/icon';
+
+type GlyphMap = ReadonlyMap<string, number>;
+
+const FONT_AWESOME_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesomeGlyphs));
+const FONT_AWESOME_5_BRAND_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome5BrandGlyphs));
+const FONT_AWESOME_5_REGULAR_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome5RegularGlyphs));
+const FONT_AWESOME_5_SOLID_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome5SolidGlyphs));
+const FONT_AWESOME_6_BRAND_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome6BrandGlyphs));
+const FONT_AWESOME_6_REGULAR_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome6RegularGlyphs));
+const FONT_AWESOME_6_SOLID_GLYPHS: GlyphMap = new Map(Object.entries(fontAwesome6SolidGlyphs));
+const IONICONS_GLYPHS: GlyphMap = new Map(Object.entries(ioniconsGlyphs));
+const MATERIAL_DESIGN_GLYPHS: GlyphMap = new Map(Object.entries(materialDesignGlyphs));
+
+interface PortableIconPresentationProps {
+  readonly color: string;
+  readonly size: number;
+  readonly testID?: string;
+}
+
+type WebPortableIconProps =
+  | (FontIconSource &
+      PortableIconPresentationProps & {
+        readonly style?: React.ComponentProps<typeof Text>['style'];
+      })
+  | (SvgIconSource &
+      PortableIconPresentationProps & {
+        readonly style?: React.ComponentProps<typeof Image>['style'];
+      });
+
+/*** Renders Surface icons on web without React Native native modules or SVG codegen. */
+export function PortableIcon(props: WebPortableIconProps) {
+  if ('source' in props) return <WebSvgIcon {...props} />;
+  return <WebFontIcon {...props} />;
+}
+
+interface WebFontDefinition {
+  readonly family: string;
+  readonly fontUrl: string;
+  readonly glyphs: GlyphMap;
+  readonly weight?: TextStyle['fontWeight'];
+}
+
+/*** Renders one RNVI glyph through the same font and codepoint used by native. */
+function WebFontIcon(
+  props: FontIconSource &
+    PortableIconPresentationProps & {
+      readonly style?: React.ComponentProps<typeof Text>['style'];
+    },
+) {
+  const definition = resolveFontDefinition(props);
+  useWebFont(definition);
+  const codepoint = definition.glyphs.get(props.name);
+  if (codepoint === undefined) return null;
+
+  return (
+    <Text
+      accessibilityElementsHidden
+      aria-hidden
+      style={[
+        props.style,
+        {
+          color: props.color,
+          fontFamily: definition.family,
+          fontSize: props.size,
+          fontWeight: definition.weight,
+          height: props.size,
+          lineHeight: props.size,
+          width: props.size,
+        },
+      ]}
+      testID={props.testID}
+    >
+      {String.fromCodePoint(codepoint)}
+    </Text>
+  );
+}
+
+/*** Renders URL and bundled SVG sources through the portable web Image adapter. */
+function WebSvgIcon(
+  props: SvgIconSource &
+    PortableIconPresentationProps & {
+      readonly style?: React.ComponentProps<typeof Image>['style'];
+    },
+) {
+  const source = typeof props.source === 'string' ? { uri: props.source } : props.source;
+  return (
+    <Image
+      accessibilityElementsHidden
+      source={source}
+      style={[
+        props.style,
+        {
+          height: props.size,
+          tintColor: props.color,
+          width: props.size,
+        },
+      ]}
+      testID={props.testID}
+    />
+  );
+}
+
+/*** Resolve the browser font, glyph map, and weight for one existing Surface icon contract. */
+function resolveFontDefinition(source: FontIconSource): WebFontDefinition {
+  const runtimeProvider: unknown = source.provider;
+  switch (source.provider) {
+    case undefined:
+    case 'Ionicons':
+      return { family: 'Ionicons', fontUrl: ioniconsFont, glyphs: IONICONS_GLYPHS };
+    case 'FontAwesome':
+      return { family: 'FontAwesome', fontUrl: fontAwesomeFont, glyphs: FONT_AWESOME_GLYPHS };
+    case 'FontAwesome5':
+      return resolveFontAwesome5Definition(source.variant);
+    case 'FontAwesome6':
+      return resolveFontAwesome6Definition(source.variant);
+    case 'MaterialDesignIcons':
+      return {
+        family: 'MaterialDesignIcons',
+        fontUrl: materialDesignFont,
+        glyphs: MATERIAL_DESIGN_GLYPHS,
+      };
+    default:
+      throw new Error(`Unsupported icon provider: ${String(runtimeProvider)}`);
+  }
+}
+
+/*** Resolve one FontAwesome5 style without invoking RNVI runtime components. */
+function resolveFontAwesome5Definition(
+  variant: Extract<FontIconSource, { provider: 'FontAwesome5' }>['variant'],
+): WebFontDefinition {
+  const runtimeVariant: unknown = variant;
+  if (runtimeVariant === 'brand') {
+    return {
+      family: 'FontAwesome5Brands-Regular',
+      fontUrl: fontAwesome5BrandFont,
+      glyphs: FONT_AWESOME_5_BRAND_GLYPHS,
+      weight: 400,
+    };
+  }
+  if (runtimeVariant === 'solid') {
+    return {
+      family: 'FontAwesome5Free-Solid',
+      fontUrl: fontAwesome5SolidFont,
+      glyphs: FONT_AWESOME_5_SOLID_GLYPHS,
+      weight: 900,
+    };
+  }
+  if (runtimeVariant !== 'regular') {
+    throw new Error(`Unsupported icon FontAwesome5 variant: ${String(runtimeVariant)}`);
+  }
+  return {
+    family: 'FontAwesome5Free-Regular',
+    fontUrl: fontAwesome5RegularFont,
+    glyphs: FONT_AWESOME_5_REGULAR_GLYPHS,
+    weight: 400,
+  };
+}
+
+/*** Resolve one FontAwesome6 style without invoking RNVI runtime components. */
+function resolveFontAwesome6Definition(
+  variant: Extract<FontIconSource, { provider: 'FontAwesome6' }>['variant'],
+): WebFontDefinition {
+  const runtimeVariant: unknown = variant;
+  if (runtimeVariant === 'brand') {
+    return {
+      family: 'FontAwesome6Brands-Regular',
+      fontUrl: fontAwesome6BrandFont,
+      glyphs: FONT_AWESOME_6_BRAND_GLYPHS,
+      weight: 400,
+    };
+  }
+  if (runtimeVariant === 'solid') {
+    return {
+      family: 'FontAwesome6Free-Solid',
+      fontUrl: fontAwesome6SolidFont,
+      glyphs: FONT_AWESOME_6_SOLID_GLYPHS,
+      weight: 900,
+    };
+  }
+  if (runtimeVariant !== 'regular') {
+    throw new Error(`Unsupported icon FontAwesome6 variant: ${String(runtimeVariant)}`);
+  }
+  return {
+    family: 'FontAwesome6Free-Regular',
+    fontUrl: fontAwesome6RegularFont,
+    glyphs: FONT_AWESOME_6_REGULAR_GLYPHS,
+    weight: 400,
+  };
+}
+
+/*** Register one icon font once before browser layout uses its glyphs. */
+function useWebFont(definition: WebFontDefinition) {
+  React.useInsertionEffect(() => {
+    if (typeof document === 'undefined') return;
+    const id = createFontStyleId(definition);
+    if (document.getElementById(id) !== null) return;
+
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = createFontFaceCss(definition);
+    document.head.appendChild(style);
+  }, [definition.family, definition.fontUrl, definition.weight]);
+}
+
+/*** Create a stable DOM id for one font face variant. */
+function createFontStyleId(definition: WebFontDefinition): string {
+  return `surface-icon-font-${definition.family}-${definition.weight ?? 'normal'}`;
+}
+
+/*** Create the browser font-face rule used by the portable font icon adapter. */
+function createFontFaceCss(definition: WebFontDefinition): string {
+  return `@font-face{font-family:"${definition.family}";src:url("${definition.fontUrl}") format("truetype");font-style:normal;font-weight:${definition.weight ?? 400};font-display:block;}`;
+}

package/src/types/font-assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.ttf' {
+  const fontUrl: string;
+  export default fontUrl;
+}