diff --git a/apps/docs/src/content/docs/getting-started/icons.mdx b/apps/docs/src/content/docs/getting-started/icons.mdx index 47049853..3e10eaea 100644 --- a/apps/docs/src/content/docs/getting-started/icons.mdx +++ b/apps/docs/src/content/docs/getting-started/icons.mdx @@ -24,19 +24,21 @@ 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) { + cssInterop(icon, { + className: { + target: 'style', + nativeStyleToProp: { + color: true, + opacity: true, + }, + }, + }); } ``` @@ -44,8 +46,6 @@ import { Aside, Code, Steps } from '@astrojs/starlight/components'; 3. Create a file for each Icon component - - ## 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** + + = ({ name, ...stuff }) => { + const LucideIcon = icons[name]; + + return ; + }; + + iconWithClassName(Icon); + + export default Icon;`} /> diff --git a/apps/docs/src/content/docs/getting-started/initial-setup.mdx b/apps/docs/src/content/docs/getting-started/initial-setup.mdx index 83c62026..72ad2c3f 100644 --- a/apps/docs/src/content/docs/getting-started/initial-setup.mdx +++ b/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. - = ({ name, ...stuff }) => { + const LucideIcon = icons[name]; + + return ; +}; + +iconWithClassName(Icon); + +export default Icon; diff --git a/packages/templates/starter-base/lib/icons/iconWithClassName.ts b/packages/templates/starter-base/lib/icons/iconWithClassName.ts index c475ed11..2e061542 100644 --- a/packages/templates/starter-base/lib/icons/iconWithClassName.ts +++ b/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) { cssInterop(icon, { className: { target: 'style',