diff --git a/example/storybook-nativewind/src/components/Icon/Icon.tsx b/example/storybook-nativewind/src/components/Icon/Icon.tsx
index 2d7fbfd710..50db7641a0 100644
--- a/example/storybook-nativewind/src/components/Icon/Icon.tsx
+++ b/example/storybook-nativewind/src/components/Icon/Icon.tsx
@@ -68,7 +68,6 @@ import {
Camera,
} from 'lucide-react-native';
const IconBasic = ({ size, ...props }: any) => {
- // return ;
return ;
};
diff --git a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
index 3e61748b5a..2ef4368f26 100644
--- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
@@ -15,6 +15,7 @@ import { Meta } from '@storybook/addon-docs';
import {
+ Center,
AddIcon,
CheckIcon,
CloseIcon,
@@ -73,12 +74,14 @@ import {
Icon,
VStack,
HStack,
+ createIcon,
+} from '../../core-components/nativewind';
+import {
ChromeIcon,
InstagramIcon,
FacebookIcon,
- createIcon,
Camera,
-} from '../../core-components/nativewind';
+} from 'lucide-react-native';
import { Path, Rect } from 'react-native-svg';
import { CollapsibleCode } from "@gluestack/design-system"
@@ -180,7 +183,7 @@ Role: img is passed
### Props
-Icon component is created using AsForwarder component from @gluestack-style/react. It extends all the props supported by [gluestack-ui AsForwarder](https://gluestack.io/style/docs/api/as-forwarder), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
+Icon component is created using AsForwarder component from @gluestack-style/react. It extends all the props supported by [gluestack-ui AsForwarder](https://gluestack.io/style/docs/api/as-forwarder) and the props mentioned below.
#### Image
@@ -219,16 +222,241 @@ Icon component is created using AsForwarder component from @gluestack-style/reac
-## Spec Doc
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### All gluestack icons
+
+Below is a list of all of the icons in the library.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`,
+ transformCode: (code) => {
+ return transformedCode(code);
+ },
+ scope: {
+ Center,
+ Wrapper,
+ HStack,
+ AddIcon,
+ CheckIcon,
+ CloseIcon,
+ InfoIcon,
+ ArrowUpIcon,
+ ChevronDownIcon,
+ ChevronUpIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ ChevronsLeftIcon,
+ ChevronsRightIcon,
+ AtSignIcon,
+ CheckCircleIcon,
+ AlertCircleIcon,
+ ChevronsUpDownIcon,
+ PaperclipIcon,
+ BellIcon,
+ MenuIcon,
+ ArrowRightIcon,
+ ArrowLeftIcon,
+ ArrowDownIcon,
+ CalendarDaysIcon,
+ MessageCircleIcon,
+ CopyIcon,
+ TrashIcon,
+ DownloadIcon,
+ GripVerticalIcon,
+ EditIcon,
+ MailIcon,
+ LinkIcon,
+ ExternalLinkIcon,
+ LockIcon,
+ RemoveIcon,
+ MoonIcon,
+ SlashIcon,
+ PhoneIcon,
+ HelpCircleIcon,
+ RepeatIcon,
+ Repeat1Icon,
+ SearchIcon,
+ SettingsIcon,
+ LoaderIcon,
+ StarIcon,
+ SunIcon,
+ ClockIcon,
+ UnlockIcon,
+ EyeIcon,
+ EyeOffIcon,
+ CloseCircleIcon,
+ ShareIcon,
+ CircleIcon,
+ FavouriteIcon,
+ GlobeIcon,
+ ThreeDotsIcon,
+ Icon,
+ PlayIcon,
+ },
+ argsType: {},
+ }}
+ />
+
+
+#### Lucide Icons (Recommended)
-Explore the comprehensive details of the Icon in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
+[Lucide](https://lucide.dev/docs/lucide-react-native) is an open source icon library for displaying icons for react-native. `gluestack-ui` provides an easy integration with lucide icons.
-
+
+
+
+
+
+
+
+`,
+ transformCode: (code) => {
+ return transformedCode(code);
+ },
+ scope: {
+ Wrapper,
+ VStack,
+ ChromeIcon,
+ InstagramIcon,
+ FacebookIcon,
+ Icon,
+ Camera,
+ },
+ argsType: {},
+ }}
+ />
+
+
+#### SVG & Custom Icons
+
+We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component.
+CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc.
+
+#### SVG & Custom Icons
+
+We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component.
+CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc.
+
+##### Notes to remember while using createIcon function
+
+- Pass svg props such as `viewBox` in `createIcon` directly.
+- Copy the svg code without the SVG tag directly into the function argument `Path` or `D` or whichever prop justifies your svg.
+- Replace HTML SVG tags (e.g., ``, `` etc) with the corresponding React Native SVG components (e.g., ``, `` etc).
+- For any color property (i.e. fill, stroke etc), if you want to override that color, pass "currentColor" instead of a colorCode.
+
+Before :
+` `
+
+After :
+` `
+
+
+
+ {/* Rect, Path is imported from 'react-native-svg' */}
+
+
+
+
+
+
+ ),
+ });
+ function App () {
+ return ;
+ }
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'App');
+ },
+ scope: {
+ Wrapper,
+ createIcon,
+ Icon,
+ Path,
+ Rect,
+ },
+ argsType: {},
+ }}
+ />
+
diff --git a/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx b/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx
index 470538ca01..6508ff9dd3 100644
--- a/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx
+++ b/example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx
@@ -299,12 +299,11 @@ Below is a list of all of the icons in the library.
GlobeIcon,
ThreeDotsIcon,
Icon,
- PlayIcon
+ PlayIcon,
},
argsType: {},
}}
-/>
-
+ />
#### Lucide Icons (Recommended)