Merge pull request #297 from mrzachnugent/@zach/docs-init

feat(docs): document the init command from the CLI + content improvements

Author: mrzachnugent

apps/docs/astro.config.mjs

@@ -39,8 +39,8 @@ export default defineConfig({
               link: '/getting-started/initial-setup/',
             },
             {
-              label: 'Adding Icons',
-              link: '/getting-started/adding-icons/',
+              label: 'Icons',
+              link: '/getting-started/icons/',
             },
             {
               label: 'Common patterns',

apps/docs/src/components/ui/button.tsx

@@ -9,7 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-white hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',

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

@@ -0,0 +1,97 @@
+---
+title: Adding Icons
+description: Wrap your icon components with `iconWithClassName` to add a class name to the icon.
+---
+
+{/* prettier-ignore-start */}
+{/* prettier-ignore-end */}
+
+import { Aside, Code, Steps } from '@astrojs/starlight/components';
+
+## Set Up
+
+    <Steps>
+        1. Install the following packages:
+    </Steps>
+
+    ```bash
+    npx expo install react-native-svg lucide-react-native
+    ```
+    <Steps>
+        2. Resolve the className strings into icon styles
+    </Steps>
+
+    Add the `iconWithClassName` function in the `~/lib/icons/iconWithClassName.ts` file.
+
+    ```tsx
+    import type { LucideIcon } from 'lucide-react-native';
+    import { cssInterop } from 'nativewind';
+
+    export function iconWithClassName(icon: LucideIcon) {
+    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.
+
+    <Aside type='caution'>
+        Neglecting to wrap icons with `iconWithClassName` will prevent you from being able to update the
+        `color` or `opacity` props via the `className` prop.
+    </Aside>
+
+### Create a file for each icon in `~/lib/icons/`
+
+    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/).
+
+
+    **Then**, in each file:
+
+    <Steps>
+        1. Import the Icon from LucideIcon
+    </Steps>
+    <Steps>
+        2. Import the `iconWithClassName` function
+    </Steps>
+    <Steps>
+        3. Call the `iconWithClassName` function and pass the icon as its argument
+    </Steps>
+    <Steps>
+        4. Export the Icon as a named export
+    </Steps>
+
+### Examples
+
+    **Sun**
+
+    <Code title="~/lib/icons/Sun" lang="tsx" code={`
+    import { Sun } from 'lucide-react-native';
+    import { iconWithClassName } from './iconWithClassName';
+    iconWithClassName(Sun);
+    export { Sun };`} />
+
+    **MoonStar**
+
+    <Code title="~/lib/icons/MoonStar" lang="tsx" code={`
+    import { MoonStar } from 'lucide-react-native';
+    import { iconWithClassName } from './iconWithClassName';
+    iconWithClassName(MoonStar);
+    export { MoonStar };`} />
+