dynamic icon (One generic icon component)

apps/docs/src/content/docs/getting-started/icons.mdx

@@ -24,28 +24,28 @@ import { Aside, Code, Steps } from '@astrojs/starlight/components';
     Add the `iconWithClassName` function in the `~/lib/icons/iconWithClassName.ts` file.
 
     ```tsx
-    import type { LucideIcon } from 'lucide-react-native';
+    import type { LucideIcon, LucideProps } from 'lucide-react-native';
     import { cssInterop } from 'nativewind';
-
-    export function iconWithClassName(icon: LucideIcon) {
-    cssInterop(icon, {
-        className: {
-        target: 'style',
-        nativeStyleToProp: {
-            color: true,
-            opacity: true,
-        },
-        },
-    });
+    import { FC } from 'react';
+    import { IconProps } from './Icon';
+
+    export function iconWithClassName(icon: LucideIcon | FC<IconProps & LucideProps>) {
+        cssInterop(icon, {
+            className: {
+                target: 'style',
+                nativeStyleToProp: {
+                    color: true,
+                    opacity: true,
+                },
+            },
+        });
     }
     ```
 
     <Steps>
         3. Create a file for each Icon component
     </Steps>
 
-
-
 ## Create Icon Components
 
     Wrap your icon components with `iconWithClassName` to add a class name to the icon.
@@ -57,7 +57,7 @@ import { Aside, Code, Steps } from '@astrojs/starlight/components';
 
 ### Create a file for each icon in `~/lib/icons/`
 
-    Wrap your icon components with `iconWithClassName` to add a class name to the icon. 
+    Wrap your icon components with `iconWithClassName` to add a class name to the icon.
 
     **First**, create a new file in the `~/lib/icons/` directory with the name of the [LucideIcon](https://lucide.dev/icons/).
 
@@ -95,3 +95,24 @@ import { Aside, Code, Steps } from '@astrojs/starlight/components';
     iconWithClassName(MoonStar);
     export { MoonStar };`} />
 
+    **Dynamic Icon**
+
+    <Code title="~/lib/icons/Icon.tsx" lang="tsx" code={`
+    import { icons, LucideProps } from "lucide-react-native";
+
+    import { FC } from "react";
+    import { iconWithClassName } from "./iconWithClassName";
+
+    export interface IconProps {
+        name: keyof typeof icons;
+    }
+
+    const Icon: FC<IconProps & LucideProps> = ({ name,  ...stuff }) => {
+        const LucideIcon = icons[name];
+
+        return <LucideIcon {...stuff} />;
+    };
+
+    iconWithClassName(Icon);
+
+    export default Icon;`} />

apps/docs/src/content/docs/getting-started/initial-setup.mdx

@@ -7,7 +7,15 @@ description: NativeWind Light and Dark Mode
 {/* prettier-ignore-end */}
 
 import Code from '@/components/Code.astro';
-import { Aside, Card, Code as StarlightCode, TabItem, Tabs, FileTree, Steps } from '@astrojs/starlight/components';
+import {
+  Aside,
+  Card,
+  Code as StarlightCode,
+  TabItem,
+  Tabs,
+  FileTree,
+  Steps,
+} from '@astrojs/starlight/components';
 import importedTwUniversalCondig from '@/code-samples/tw-universal-config.js?raw';
 import importedTwNativeCondig from '@/code-samples/tw-native-config.js?raw';
 
@@ -91,6 +99,7 @@ import importedTwNativeCondig from '@/code-samples/tw-native-config.js?raw';
           - ToggleTheme.tsx
         - lib
           - icons
+            - Icon.tsx
             - iconWithClassName.ts
             - Info.tsx
             - MoonStar.tsx
@@ -200,7 +209,7 @@ import importedTwNativeCondig from '@/code-samples/tw-native-config.js?raw';
       6. Add the following css variables to `~/global.css` file.
     </Steps>
 
-    <Code lang="css" 
+    <Code lang="css"
     title="~/global.css"
     code={`@tailwind base;
     @tailwind components;

packages/templates/starter-base/lib/icons/Icon.tsx

@@ -0,0 +1,18 @@
+import { icons, LucideProps } from 'lucide-react-native';
+
+import { FC } from 'react';
+import { iconWithClassName } from './iconWithClassName';
+
+export interface IconProps {
+  name: keyof typeof icons;
+}
+
+const Icon: FC<IconProps & LucideProps> = ({ name, ...stuff }) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon {...stuff} />;
+};
+
+iconWithClassName(Icon);
+
+export default Icon;

packages/templates/starter-base/lib/icons/iconWithClassName.ts

@@ -1,7 +1,9 @@
-import type { LucideIcon } from 'lucide-react-native';
+import type { LucideIcon, LucideProps } from 'lucide-react-native';
 import { cssInterop } from 'nativewind';
+import { FC } from 'react';
+import { IconProps } from './Icon';
 
-export function iconWithClassName(icon: LucideIcon) {
+export function iconWithClassName(icon: LucideIcon | FC<IconProps & LucideProps>) {
   cssInterop(icon, {
     className: {
       target: 'style',