feat: Reduce bundle size by 66% (#67)

* feat: change icon generation logic

* feat: change icon generation logic

* feat: add name prop to IconBase for dynamic class and testID generation

* feat: add SingleImportsScreen component and integrate into TabLayout

* fix: exclude yarn.lock from .gitignore to ensure it is tracked

* chore: update Node.js version in CI workflow and include 'core/' in ESLint paths

* feat: clean up unused PaintFunction type

* fix: update SVG generation to join lines with newline character

Author: mrkpatchaa

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.gitignore

@@ -42,6 +42,7 @@ node_modules/
 npm-debug.log
 yarn-debug.log
 yarn-error.log
+!yarn.lock
 
 # BUCK
 buck-out/
@@ -56,4 +57,5 @@ android/keystores/debug.keystore
 /lib/
 
 # ignore generated icon files
-/src/
+src/*
+!src/lib/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "core"]
+	path = core
+	url = [email protected]:phosphor-icons/core.git

core

@@ -21,6 +21,7 @@ export default [
       'src/thin/',
       'src/index.tsx',
       'example/',
+      'core/',
     ],
   },
   eslintPluginPrettierRecommended,

eslint.config.mjs

@@ -34,6 +34,15 @@ export default function TabLayout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="single-imports"
+        options={{
+          title: 'Single',
+          tabBarIcon: ({ color, focused }) => (
+            <TestTube weight={focused ? 'fill' : 'light'} color={color} />
+          ),
+        }}
+      />
     </Tabs>
   );
 }

example/app/(tabs)/_layout.tsx

@@ -0,0 +1 @@
+export { default } from '@/components/single-imports';

example/app/(tabs)/single-imports.tsx

@@ -1,41 +1,34 @@
 /* eslint-disable react-native/no-inline-styles */
-/* eslint-disable  @typescript-eslint/no-explicit-any */
 
-import React, { useCallback, useState, useMemo } from 'react';
+import { useCallback, useState } from 'react';
+
 import {
   StyleSheet,
   View,
   Text,
   StatusBar,
   Image,
+  FlatList,
   TouchableOpacity,
 } from 'react-native';
-import { Palette, PencilLine, Swap } from '@/components/icons';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
-
+import Swap from '@/components/icons/icons/Swap';
+import Acorn from '@/components/icons/icons/Acorn';
+import Palette from '@/components/icons/icons/Palette';
 const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const singleIcons = [Acorn, Palette, Swap]
+export default function SingleImportsScreen() {
+  const [toggleActive, setToggleActive] = useState(false);
 
-export default function HomeScreen() {
-  const [weightIdx, setWeightIdx] = useState(2);
-
-  const weight: IconWeight = useMemo(
-    () => weights[weightIdx] as any,
-    [weightIdx]
-  );
-
-  const handleChangeWeight = useCallback(() => {
-    setWeightIdx((weightIdx + 1) % weights.length);
-  }, [weightIdx]);
-
-  const handleChangeIconColor = useCallback(() => {
-    setIconColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
-  }, []);
-
+  const handleToggle = useCallback(() => {
+    setToggleActive(!toggleActive);
+  }, [toggleActive]);
   return (
     <View style={styles.rootView}>
       <StatusBar barStyle="light-content" />
-
-      <View style={styles.headerContainer}>
+      <SafeAreaView style={styles.headerContainer}>
         <View style={styles.header}>
           <Image source={PhosphorLogo} style={styles.logoImage} />
           <View
@@ -54,26 +47,32 @@ export default function HomeScreen() {
                 textTransform: 'capitalize',
               }}
             >
-              {weight}
+              Single imports
             </Text>
           </View>
-          <TouchableOpacity
-            style={styles.weightSelect}
-            onPress={handleChangeIconColor}
-          >
-            <Palette color="#FFF" weight={weight} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={styles.weightSelect}
-            onPress={handleChangeWeight}
-          >
-            <PencilLine color="#FFF" weight={weight} />
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.weightSelect}>
-            <Swap color="#FFF" weight={weight} />
+          <TouchableOpacity style={styles.weightSelect} onPress={handleToggle}>
+            <Swap color="#FFF" weight={'regular'} />
           </TouchableOpacity>
         </View>
-      </View>
+      </SafeAreaView>
+      <FlatList
+        style={styles.scrollView}
+        contentContainerStyle={styles.main}
+        data={singleIcons}
+        keyExtractor={(item) => item}
+        numColumns={3}
+        renderItem={({ item: Icon }) => (
+          <View style={styles.iconItem}>
+            <Icon
+              size={48}
+              weight={weights[Math.floor(Math.random() * 6)]}
+              color={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
+              duotoneColor={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
+              duotoneOpacity={Math.random()}
+            />
+          </View>
+        )}
+      />
     </View>
   );
 }

example/components/home.web.tsx example/components/single-imports.tsxexample/components/home.web.tsx renamed to example/components/single-imports.tsx

@@ -10,28 +10,30 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@react-navigation/native": "^6.0.2",
-    "expo": "~51.0.39",
-    "expo-constants": "~16.0.2",
-    "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.24",
-    "expo-splash-screen": "~0.27.7",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0",
+    "@react-navigation/bottom-tabs": "^7.2.0",
+    "@react-navigation/native": "^7.0.14",
+    "@react-navigation/native-stack": "^7.2.0",
+    "expo": "^52.0.27",
+    "expo-constants": "~17.0.4",
+    "expo-linking": "~7.0.4",
+    "expo-router": "~4.0.17",
+    "expo-splash-screen": "~0.29.21",
+    "expo-status-bar": "~2.0.1",
+    "expo-system-ui": "~4.0.7",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.6",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@eslint/js": "^9.9.0",
-    "@types/react": "~18.2.79",
+    "@types/react": "~18.3.12",
     "eslint": "9.x",
     "eslint-plugin-react": "^7.35.0",
     "globals": "^15.9.0",

example/package.json

@@ -14,4 +14,4 @@
     ".expo/types/**/*.ts",
     "expo-env.d.ts"
   ]
-}
+}