feat: export svgs from ui for mobile

apps/mobile/package.json

@@ -102,8 +102,8 @@
     "react-native-reanimated": "3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0",
-    "react-native-svg-transformer": "1.3.0",
+    "react-native-svg": "15.5.0",
+    "react-native-svg-transformer": "1.5.0",
     "react-native-web": "0.19.12",
     "react-native-webview": "13.8.6",
     "react-redux": "9.1.2",

apps/mobile/src/app/wallet/settings/index.tsx

@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
 
-import { Box, Text, Theme } from '@leather.io/ui/native';
+import { Box, Text, Theme, WalletIcon } from '@leather.io/ui/native';
 
 export default function SettingsScreen() {
   const { bottom } = useSafeAreaInsets();
@@ -21,6 +21,7 @@ export default function SettingsScreen() {
         }}
       >
         <Text>{t`Hello`}</Text>
+        <WalletIcon />
       </ScrollView>
     </Box>
   );

packages/ui/index.d.ts

@@ -3,3 +3,11 @@ declare module '*.png';
 declare module '*.jpg';
 declare module '*.jpeg';
 declare module '*.webp';
+
+// For SVGs
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}

packages/ui/metro.config.cjs

@@ -26,6 +26,11 @@ config.resolver.nodeModulesPaths = [
   path.resolve(workspaceRoot, 'node_modules', '.pnpm', 'node_modules'),
 ];
 
+// add SVG compatibility
+config.transformer = {
+  ...config.transformer,
+  babelTransformerPath: require.resolve('react-native-svg-transformer'),
+};
 config.resolver = {
   ...config.resolver,
   assetExts: config.resolver.assetExts.filter(ext => ext !== 'svg'),

packages/ui/native.ts

@@ -6,3 +6,4 @@ export { generateTheme, ThemeProvider } from './src/theme-native';
 export { TouchableOpacity } from './src/components/button/touchable-opacity.native';
 export { useLoadFonts } from './src/hooks/use-load-fonts.native';
 export type { Theme } from './src/theme-native';
+export * from './src/icons/native';

packages/ui/package.json

@@ -58,13 +58,15 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
+    "react-native-svg": "15.5.0",
     "tsup": "8.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.24.6",
     "@babel/runtime": "7.23.2",
     "@leather.io/eslint-config": "workspace:*",
     "@leather.io/panda-preset": "workspace:*",
+    "@leather.io/tsconfig-config": "workspace:*",
     "@pandacss/dev": "0.40.1",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@storybook/addon-actions": "7.6.17",
@@ -91,6 +93,7 @@
     "eslint-config-universe": "12.0.0",
     "postcss-loader": "8.1.1",
     "postcss-preset-env": "9.4.0",
+    "react-native-svg-transformer": "1.5.0",
     "storybook": "7.6.15",
     "style-loader": "3.3.4",
     "tsconfig-paths-webpack-plugin": "4.1.0",

packages/ui/src/icons/native/index.ts

@@ -0,0 +1 @@
+export * from './wallet-icon.native';

packages/ui/src/icons/native/wallet-icon.native.tsx

@@ -0,0 +1 @@
+export { default as WalletIcon } from '../../assets-native/svgs/wallet-icon.svg';

packages/ui/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig-config/tsconfig.base",
+  "extends": ["@leather.io/tsconfig-config/tsconfig.base.json"],
   "compilerOptions": {
     "composite": true,
     "incremental": true,

packages/ui/tsconfig.native.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig-config/tsconfig.base",
+  "extends": ["@leather.io/tsconfig-config/tsconfig.base.json"],
   "compilerOptions": {
     "composite": true,
     "incremental": true,
@@ -9,6 +9,13 @@
     "rootDir": ".",
     "outDir": "./dist-native"
   },
-  "include": ["**/*.native.ts", "**/*.native.tsx", "native.ts", "**/theme-native/**/*"],
+  "include": [
+    "**/*.native.ts",
+    "**/*.native.tsx",
+    "native.ts",
+    "**/theme-native/**/*",
+    "src/icons/native/*",
+    "index.d.ts"
+  ],
   "exclude": ["node_modules", "babel.config.js", "metro.config.js", "**/*.js", "./dist-*"]
 }

packages/ui/tsconfig.web.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig-config/tsconfig.base",
+  "extends": ["@leather.io/tsconfig-config/tsconfig.base.json"],
   "compilerOptions": {
     "jsx": "react-jsx",
     "lib": ["ESNext", "DOM"],