svg works

packages/mobile-sdk-alpha/package.json

@@ -70,14 +70,14 @@
       "require": "./dist/cjs/hooks/index.cjs"
     },
     "./svgs/*.svg": {
-      "react-native": "./svgs/*.svg",
-      "import": "./svgs/*.svg",
-      "require": "./svgs/*.svg"
+      "react-native": "./dist/esm/svgs/*.svg",
+      "import": "./dist/esm/svgs/*.svg",
+      "require": "./dist/cjs/svgs/*.svg"
     },
     "./svgs/icons/*.svg": {
-      "react-native": "./svgs/icons/*.svg",
-      "import": "./svgs/icons/*.svg",
-      "require": "./svgs/icons/*.svg"
+      "react-native": "./dist/esm/svgs/icons/*.svg",
+      "import": "./dist/esm/svgs/icons/*.svg",
+      "require": "./dist/cjs/svgs/icons/*.svg"
     }
   },
   "main": "./dist/cjs/index.cjs",

packages/mobile-sdk-alpha/scripts/copy-assets.mjs

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+import { cpSync, existsSync, mkdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const rootDir = join(__dirname, '..');
+
+function copyAssets() {
+  const sourceDir = join(rootDir, 'svgs');
+  const targetEsmDir = join(rootDir, 'dist/esm/svgs');
+  const targetCjsDir = join(rootDir, 'dist/cjs/svgs');
+
+  if (!existsSync(sourceDir)) {
+    console.log('No svgs directory found, skipping asset copy');
+    return;
+  }
+
+  // Create target directories if they don't exist
+  mkdirSync(targetEsmDir, { recursive: true });
+  mkdirSync(targetCjsDir, { recursive: true });
+
+  // Copy SVGs to both ESM and CJS dist folders
+  try {
+    cpSync(sourceDir, targetEsmDir, { recursive: true });
+    cpSync(sourceDir, targetCjsDir, { recursive: true });
+    console.log('✅ SVG assets copied to dist folders');
+  } catch (error) {
+    console.error('❌ Failed to copy SVG assets:', error.message);
+    process.exit(1);
+  }
+}
+
+copyAssets();

packages/mobile-sdk-alpha/src/flows/onboarding/id-selection-screen.tsx

@@ -4,15 +4,15 @@
 
 import type React from 'react';
 
+import AadhaarLogo from '../..//svgs/icons/aadhaar.svg';
 import { BodyText, RoundFlag, View, XStack, YStack } from '../../components';
-// import AadhaarLogo from '@selfxyz/mobile-sdk-alpha/svgs/icons/aadhaar.svg';
-// import EPassportLogoRounded from '@selfxyz/mobile-sdk-alpha/svgs/icons/epassport_rounded.svg';
-// import PlusIcon from '@selfxyz/mobile-sdk-alpha/svgs/icons/plus.svg';
-// import SelfLogo from '@selfxyz/mobile-sdk-alpha/svgs/logo.svg';
 import { black, slate100, slate300, slate400, white } from '../../constants/colors';
 import { advercase, dinot } from '../../constants/fonts';
 import { useSelfClient } from '../../context';
 import { buttonTap } from '../../haptic';
+import EPassportLogoRounded from '../../svgs/icons/epassport_rounded.svg';
+import PlusIcon from '../../svgs/icons/plus.svg';
+import SelfLogo from '../../svgs/logo.svg';
 import { SdkEvents } from '../../types/events';
 
 const getDocumentName = (docType: string): string => {
@@ -57,11 +57,11 @@ const getDocumentDescription = (docType: string): string => {
 const getDocumentLogo = (docType: string): React.ReactNode => {
   switch (docType) {
     case 'p':
-      return; //<EPassportLogoRounded />;
+      return <EPassportLogoRounded />;
     case 'i':
-      return; //<EPassportLogoRounded />;
+      return <EPassportLogoRounded />;
     case 'a':
-      return; //<AadhaarLogo />;
+      return <AadhaarLogo />;
     default:
       return null;
   }
@@ -93,7 +93,7 @@ const IDSelectionScreen: React.FC<IDSelectionScreenProps> = props => {
           <View width={48} height={48}>
             <RoundFlag countryCode={countryCode} size={48} />
           </View>
-          {/* <PlusIcon width={18} height={18} color={slate400} /> */}
+          <PlusIcon width={18} height={18} color={slate400} />
           <YStack
             backgroundColor={black}
             borderRadius={'$2'}
@@ -102,7 +102,7 @@ const IDSelectionScreen: React.FC<IDSelectionScreenProps> = props => {
             justifyContent="center"
             alignItems="center"
           >
-            {/* <SelfLogo width={24} height={24} /> */}
+            <SelfLogo width={24} height={24} />
           </YStack>
         </XStack>
         <BodyText

packages/mobile-sdk-alpha/src/types/svg.d.ts

@@ -0,0 +1,10 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+declare module '*.svg' {
+  import type React from 'react';
+  import type { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}

packages/mobile-sdk-alpha/tsup.config.ts

@@ -53,6 +53,7 @@ export default defineConfig([
     splitting: true,
     clean: true,
     outDir: 'dist/esm',
+    onSuccess: 'node ./scripts/copy-assets.mjs',
     tsconfig: './tsconfig.json',
     target: 'es2020',
     external: [
@@ -71,6 +72,8 @@ export default defineConfig([
       'react-native-keychain',
       'react-native-sqlite-storage',
       // State management (xstate included in bundle)
+      // SVG files should be handled by React Native's SVG transformer
+      /\.svg$/,
     ],
     esbuildOptions(options) {
       options.supported = {
@@ -116,6 +119,8 @@ export default defineConfig([
       'react-native-keychain',
       'react-native-sqlite-storage',
       // State management (xstate included in bundle)
+      // SVG files should be handled by React Native's SVG transformer
+      /\.svg$/,
     ],
     outExtension: ({ format }) => ({ js: format === 'cjs' ? '.cjs' : '.js' }),
     esbuildOptions(options) {