From f9b2a6f42019c5c829a3a612c3174adf07530c0d Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 1 Mar 2024 13:28:53 +0530 Subject: [PATCH 1/4] feat: add icons example --- .../src/components/Icon/Icon.tsx | 3 +- .../src/components/Icon/index.nw.stories.mdx | 240 ++++++++++++++++++ .../MediaAndIcons/Icon/index.stories.mdx | 5 +- 3 files changed, 244 insertions(+), 4 deletions(-) diff --git a/example/storybook-nativewind/src/components/Icon/Icon.tsx b/example/storybook-nativewind/src/components/Icon/Icon.tsx index 78c1e8a962..9ea0aa1b63 100644 --- a/example/storybook-nativewind/src/components/Icon/Icon.tsx +++ b/example/storybook-nativewind/src/components/Icon/Icon.tsx @@ -60,6 +60,7 @@ import { } from '@/components/ui/Icon'; import { HStack } from '@/components/ui/HStack'; import { VStack } from '@/components/ui/VStack'; +import { Center } from '@/components/ui/Center'; import { ChromeIcon, @@ -68,7 +69,6 @@ import { Camera, } from 'lucide-react-native'; const IconBasic = ({ size, ...props }: any) => { - // return ; return ; }; @@ -141,4 +141,5 @@ export { FacebookIcon, createIcon, Camera, + Center, }; 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 6731ef0bb8..c69007dd82 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, @@ -228,3 +229,242 @@ Explore the comprehensive details of the Icon in this document, including its im src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D6412%253A31332%26type%3Ddesign%26node-id%3D6412-33234%26viewport%3D723%252C127%252C0.03%26t%3DxNCgdoHjEw3Tlb72-1%26scaling%3Dscale-down%26starting-point-node-id%3D6412%253A33234%26mode%3Ddesign" allowFullScreen /> + +### 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) + +[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) From 2bfb58da2c7fa32ea51e1af13357b7f5875a990c Mon Sep 17 00:00:00 2001 From: Damini Date: Mon, 4 Mar 2024 11:45:34 +0530 Subject: [PATCH 2/4] fix: nativewind imports --- .../src/components/Icon/index.nw.stories.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 c69007dd82..1e2a9535f5 100644 --- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx @@ -74,12 +74,14 @@ import { Icon, VStack, HStack, + createIcon, +} from '../../components-example/nativewind'; +import { ChromeIcon, InstagramIcon, FacebookIcon, - createIcon, Camera, -} from './Icon'; +} from 'lucide-react-native'; import { Path, Rect } from 'react-native-svg'; From 4466a40b5a8fa2cb0eb18ad447d8898dd2f0adfd Mon Sep 17 00:00:00 2001 From: Damini Date: Mon, 4 Mar 2024 11:54:29 +0530 Subject: [PATCH 3/4] fix: icon base color --- .../src/components-example/nativewind/Icon/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx index dce8e1c00f..aef1528a1b 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx @@ -8,7 +8,7 @@ export const UIIcon = createIcon({ }); const iconStyle = tva({ - base: 'text-typography-0 fill-none', + base: 'text-typography-900 fill-none', variants: { size: { '2xs': 'h-3 w-3', From 8236214ce991959abb6c17abcc1a7fd8bd8a0189 Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 8 Mar 2024 13:30:30 +0530 Subject: [PATCH 4/4] fix: remove spec docs --- .../src/components/Icon/index.nw.stories.mdx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) 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 e7c84cea59..2ef4368f26 100644 --- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx @@ -183,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 @@ -222,20 +222,6 @@ Icon component is created using AsForwarder component from @gluestack-style/reac -## Spec Doc - -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. - -