feat: use popicons

app/_layout.tsx

@@ -125,3 +125,5 @@ function useConnectionChecker() {
     }
   }, [error?.message]);
 }
+
+global.React = React;

components/DualCurrencyInput.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { SwapIcon } from "~/components/Icons";
 import { useGetFiatAmount, useGetSatsAmount } from "~/hooks/useGetFiatAmount";
 import {
   CURSOR_COLOR,
@@ -8,7 +9,6 @@ import {
   SATS_REGEX,
 } from "~/lib/constants";
 import { useAppStore } from "~/lib/state/appStore";
-import { RefreshCw } from "./Icons";
 import { Input } from "./ui/input";
 import { Text } from "./ui/text";
 
@@ -79,7 +79,7 @@ export function DualCurrencyInput({
           <Text className="font-semibold2 text-2xl text-muted-foreground">
             {inputMode === "fiat" ? fiatCurrency : "sats"}
           </Text>
-          <RefreshCw className="text-muted-foreground" width={16} height={16} />
+          <SwapIcon className="text-muted-foreground" width={16} height={16} />
         </View>
       </TouchableOpacity>
       {

components/Icons.tsx

@@ -1,51 +1,37 @@
 import {
-  AlertCircle,
-  ArchiveRestore,
-  ArrowDown,
-  ArrowLeftRight,
-  Bitcoin,
-  BookUser,
-  Camera,
-  CameraOff,
-  CheckCircle,
-  ChevronDown,
-  ChevronUp,
-  CircleCheck,
-  ClipboardPaste,
-  Cog,
-  Copy,
-  Currency,
-  Egg,
-  Fingerprint,
-  HelpCircle,
-  Hotel,
-  Keyboard,
-  LogOut,
-  LucideIcon,
-  Menu,
-  MoveDown,
-  MoveDownLeft,
-  MoveDownRight,
-  MoveUp,
-  MoveUpRight,
-  Palette,
-  PlusCircle,
-  Power,
-  RefreshCw,
-  Settings2,
-  Share2,
-  Trash2,
-  TriangleAlert,
-  UserCircle2,
-  Wallet2,
-  WalletIcon,
-  X,
-  XCircle,
-  ZapIcon,
-} from "lucide-react-native";
+  PopiconsCircleExclamationLine as AlertCircleIcon,
+  PopiconsAtomSolid as AtomIcon,
+  PopiconsBitcoinSolid as BitcoinIcon,
+  PopiconsAddressBookSolid as BookUserIcon,
+  PopiconsCameraWebOffSolid as CameraOffIcon,
+  PopiconsCircleCheckLine as CheckCircleIcon,
+  PopiconsChevronTopLine as ChevronUpIcon,
+  PopiconsCopySolid as CopyIcon,
+  PopiconsEditSolid as EditIcon,
+  PopiconsUploadSolid as ExportIcon,
+  PopiconsTouchIdSolid as FingerprintIcon,
+  PopiconsCircleInfoLine as HelpCircleIcon,
+  PopiconsArrowDownLine as MoveDownIcon,
+  PopiconsArrowUpLine as MoveUpIcon,
+  PopiconsClipboardTextSolid as PasteIcon,
+  PopiconsReloadLine as RefreshIcon,
+  PopiconsReloadSolid as ResetIcon,
+  PopiconsSettingsMinimalLine as SettingsIcon,
+  PopiconsShareSolid as ShareIcon,
+  PopiconsLogoutSolid as SignOutIcon,
+  PopiconsLoopSolid as SwapIcon,
+  PopiconsPaintSolid as ThemeIcon,
+  PopiconsBinSolid as TrashIcon,
+  PopiconsTriangleExclamationLine as TriangleAlertIcon,
+  PopiconsWalletHorizontalOpenSolid as WalletIcon,
+  PopiconsCircleXLine as XCircleIcon,
+  PopiconsXSolid as XIcon,
+  PopiconsBoltSolid as ZapIcon,
+} from "@popicons/react-native";
 import { cssInterop } from "nativewind";
+import { SvgProps } from "react-native-svg";
 
-function interopIcon(icon: LucideIcon) {
+function interopIcon(icon: React.FunctionComponent<SvgProps>) {
   cssInterop(icon, {
     className: {
       target: "style",
@@ -57,90 +43,62 @@ function interopIcon(icon: LucideIcon) {
   });
 }
 
-interopIcon(AlertCircle);
-interopIcon(ArrowDown);
-interopIcon(CheckCircle);
-interopIcon(Bitcoin);
-interopIcon(XCircle);
-interopIcon(MoveUp);
-interopIcon(MoveDown);
-interopIcon(ChevronDown);
-interopIcon(ChevronUp);
-interopIcon(MoveDownRight);
-interopIcon(MoveUpRight);
-interopIcon(MoveDownLeft);
-interopIcon(Camera);
-interopIcon(Menu);
-interopIcon(ZapIcon);
+interopIcon(AlertCircleIcon);
+interopIcon(AtomIcon);
+interopIcon(BitcoinIcon);
+interopIcon(BookUserIcon);
+interopIcon(CameraOffIcon);
+interopIcon(CheckCircleIcon);
+interopIcon(ChevronUpIcon);
+interopIcon(CopyIcon);
+interopIcon(EditIcon);
+interopIcon(ExportIcon);
+interopIcon(FingerprintIcon);
+interopIcon(HelpCircleIcon);
+interopIcon(MoveDownIcon);
+interopIcon(MoveUpIcon);
+interopIcon(PasteIcon);
+interopIcon(RefreshIcon);
+interopIcon(ResetIcon);
+interopIcon(SettingsIcon);
+interopIcon(ShareIcon);
+interopIcon(SignOutIcon);
+interopIcon(SwapIcon);
+interopIcon(ThemeIcon);
+interopIcon(TrashIcon);
+interopIcon(TriangleAlertIcon);
 interopIcon(WalletIcon);
-interopIcon(Copy);
-interopIcon(Currency);
-interopIcon(Settings2);
-interopIcon(ArrowLeftRight);
-interopIcon(PlusCircle);
-interopIcon(Cog);
-interopIcon(ClipboardPaste);
-interopIcon(Keyboard);
-interopIcon(BookUser);
-interopIcon(Wallet2);
-interopIcon(Share2);
-interopIcon(RefreshCw);
-interopIcon(X);
-interopIcon(Hotel);
-interopIcon(Power);
-interopIcon(CameraOff);
-interopIcon(Palette);
-interopIcon(Egg);
-interopIcon(Fingerprint);
-interopIcon(HelpCircle);
-interopIcon(CircleCheck);
-interopIcon(TriangleAlert);
-interopIcon(LogOut);
-interopIcon(ArchiveRestore);
-interopIcon(UserCircle2);
-interopIcon(Trash2);
+interopIcon(XCircleIcon);
+interopIcon(XIcon);
+interopIcon(ZapIcon);
 
 export {
-  AlertCircle,
-  ArchiveRestore,
-  ArrowDown,
-  ArrowLeftRight,
-  Bitcoin,
-  BookUser,
-  Camera,
-  CameraOff,
-  CheckCircle,
-  ChevronDown,
-  ChevronUp,
-  CircleCheck,
-  ClipboardPaste,
-  Cog,
-  Copy,
-  Currency,
-  Egg,
-  Fingerprint,
-  HelpCircle,
-  Hotel,
-  Keyboard,
-  LogOut,
-  Menu,
-  MoveDown,
-  MoveDownLeft,
-  MoveDownRight,
-  MoveUp,
-  MoveUpRight,
-  Palette,
-  PlusCircle,
-  Power,
-  RefreshCw,
-  Settings2,
-  Share2,
-  Trash2,
-  TriangleAlert,
-  UserCircle2,
-  Wallet2,
+  AlertCircleIcon,
+  AtomIcon,
+  BitcoinIcon,
+  BookUserIcon,
+  CameraOffIcon,
+  CheckCircleIcon,
+  ChevronUpIcon,
+  CopyIcon,
+  EditIcon,
+  ExportIcon,
+  FingerprintIcon,
+  HelpCircleIcon,
+  MoveDownIcon,
+  MoveUpIcon,
+  PasteIcon,
+  RefreshIcon,
+  ResetIcon,
+  SettingsIcon,
+  ShareIcon,
+  SignOutIcon,
+  SwapIcon,
+  ThemeIcon,
+  TrashIcon,
+  TriangleAlertIcon,
   WalletIcon,
-  X,
-  XCircle,
+  XCircleIcon,
+  XIcon,
   ZapIcon,
 };

components/QRCodeScanner.tsx

@@ -2,12 +2,19 @@ import { useIsFocused } from "@react-navigation/native";
 import { Camera } from "expo-camera";
 import { PermissionStatus } from "expo-modules-core/src/PermissionsInterface";
 import React, { useEffect } from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
+import { CameraOffIcon } from "~/components/Icons";
 import { Text } from "~/components/ui/text";
 import { FocusableCamera } from "./FocusableCamera";
-import { CameraOff } from "./Icons";
 import Loading from "./Loading";
 
+const styles = StyleSheet.create({
+  icon: {
+    width: 64,
+    height: 64,
+  },
+});
+
 interface QRCodeScannerProps {
   onScanned: (data: string) => void;
   startScanning: boolean;
@@ -63,7 +70,7 @@ function QRCodeScanner({
         <>
           {!isScanning && permissionStatus === PermissionStatus.DENIED && (
             <View className="flex-1 h-full flex flex-col items-center justify-center gap-2 p-6">
-              <CameraOff className="text-foreground" size={64} />
+              <CameraOffIcon className="text-foreground" style={styles.icon} />
               <Text className="text-2xl text-foreground text-center">
                 Camera Permission Denied
               </Text>

components/ToastConfig.tsx

@@ -1,15 +1,15 @@
 import { Link } from "expo-router";
 import { View } from "react-native";
 import { ToastConfig } from "react-native-toast-message";
-import { CircleCheck, XCircle } from "./Icons";
+import { CheckCircleIcon, XCircleIcon } from "~/components/Icons";
 import { Button } from "./ui/button";
 import { Text } from "./ui/text";
 
 export const toastConfig: ToastConfig = {
   success: ({ text1, text2 }) => (
     <View className="bg-foreground rounded-xl px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
-        <CircleCheck className="text-background" width={16} height={16} />
+        <CheckCircleIcon className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
       </View>
       {text2 && <Text className="text-background text-center">{text2}</Text>}
@@ -18,7 +18,7 @@ export const toastConfig: ToastConfig = {
   info: ({ text1, text2, hide }) => (
     <View className="bg-yellow-500 rounded-full px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
-        <XCircle className="text-background" width={16} height={16} />
+        <XCircleIcon className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
       </View>
       {text2 && <Text className="text-background text-center">{text2}</Text>}
@@ -27,7 +27,7 @@ export const toastConfig: ToastConfig = {
   error: ({ text1, text2, hide }) => (
     <View className="bg-destructive rounded-xl px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
-        <XCircle className="text-background" width={16} height={16} />
+        <XCircleIcon className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
       </View>
       {text2 && <Text className="text-background text-center">{text2}</Text>}
@@ -37,7 +37,7 @@ export const toastConfig: ToastConfig = {
     return (
       <View className="bg-foreground rounded-xl px-6 py-3 mx-6 flex flex-col gap-2">
         <View className="flex flex-row gap-2 justify-center items-center">
-          <XCircle className="text-background" width={16} height={16} />
+          <XCircleIcon className="text-background" width={16} height={16} />
           <Text className="text-background font-semibold2">{text1}</Text>
         </View>
         <Link href={`/settings/wallets`} asChild>

components/ui/dialog.tsx

@@ -2,8 +2,8 @@ import * as DialogPrimitive from "@rn-primitives/dialog";
 import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { XIcon } from "~/components/Icons";
 import { cn } from "~/lib/utils";
-import { X } from "../Icons";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -93,12 +93,13 @@ const DialogContent = React.forwardRef<
               "absolute right-4 top-4 p-0.5 web:group rounded-sm opacity-70 web:ring-offset-background web:transition-opacity web:hover:opacity-100 web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 web:disabled:pointer-events-none"
             }
           >
-            <X
-              size={Platform.OS === "web" ? 16 : 18}
+            <XIcon
               className={cn(
                 "text-muted-foreground",
                 open && "text-accent-foreground",
               )}
+              width={Platform.OS === "web" ? 16 : 18}
+              height={Platform.OS === "web" ? 16 : 18}
             />
           </DialogPrimitive.Close>
         </DialogPrimitive.Content>

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@getalby/lightning-tools": "^5.1.1",
     "@getalby/sdk": "^3.8.2",
+    "@popicons/react-native": "^0.0.16",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@rn-primitives/dialog": "^1.0.3",
     "@rn-primitives/portal": "^1.0.3",

pages/Home.tsx

@@ -12,7 +12,7 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import { ChevronUp, Settings2 } from "~/components/Icons";
+import { ChevronUpIcon, SettingsIcon } from "~/components/Icons";
 import { Text } from "~/components/ui/text";
 
 import { LinearGradient } from "expo-linear-gradient";
@@ -68,7 +68,7 @@ export function Home() {
         right={() => (
           <Link href="/settings" asChild>
             <TouchableOpacity>
-              <Settings2 className="text-foreground" />
+              <SettingsIcon className="text-foreground" />
             </TouchableOpacity>
           </Link>
         )}
@@ -136,7 +136,11 @@ export function Home() {
               variant="secondary"
               className="p-10 rounded-full aspect-square"
             >
-              <ChevronUp className="text-muted-foreground" size={32} />
+              <ChevronUpIcon
+                className="text-muted-foreground"
+                width={32}
+                height={32}
+              />
             </Button>
           </Link>
         </View>