Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat/icons-example #1872

Merged
merged 8 commits into from
Mar 12, 2024
Merged

feat/icons-example #1872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f9b2a6f
feat: add icons example
DaminiPandey Mar 1, 2024
9b1f512
Merge branch 'patch' of https://github.com/gluestack/gluestack-ui int…
DaminiPandey Mar 1, 2024
2bfb58d
fix: nativewind imports
DaminiPandey Mar 4, 2024
db10893
Merge branch 'patch' of https://github.com/gluestack/gluestack-ui int…
DaminiPandey Mar 4, 2024
4466a40
fix: icon base color
DaminiPandey Mar 4, 2024
9db725a
Merge branch 'patch' of https://github.com/gluestack/gluestack-ui int…
DaminiPandey Mar 6, 2024
8236214
fix: remove spec docs
DaminiPandey Mar 8, 2024
2d3d9e1
Merge branch 'patch' of https://github.com/gluestack/gluestack-ui int…
DaminiPandey Mar 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion example/storybook-nativewind/src/components/Icon/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ import {
Camera,
} from 'lucide-react-native';
const IconBasic = ({ size, ...props }: any) => {
// return <Icon as={CalendarDaysIcon} size="md" />;
return <CalendarDaysIcon size={size} {...props} />;
};

Expand Down
256 changes: 242 additions & 14 deletions example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Meta } from '@storybook/addon-docs';
<Meta title="with-nativewind/components/Media And Icons/Icon" />

import {
Center,
AddIcon,
CheckIcon,
CloseIcon,
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -219,16 +222,241 @@ Icon component is created using AsForwarder component from @gluestack-style/reac
</TableContainer>
</>

## 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.

<AppProvider>
<CodePreview
showComponentRenderer={true}
showArgsController={false}
metaData={{
code: `
<Center>
<HStack className="w-[70%] flex flex-wrap">
<Icon as={AddIcon} className="m-2 w-4 h-4" />
<Icon as={ArrowLeftIcon} className="m-2 w-4 h-4" />
<Icon as={ArrowRightIcon} className="m-2 w-4 h-4" />
<Icon as={ArrowUpIcon} className="m-2 w-4 h-4" />
<Icon as={ArrowDownIcon} className="m-2 w-4 h-4" />
<Icon as={ChevronsLeftIcon} className="m-2 w-4 h-4" />
<Icon as={ChevronsRightIcon} className="m-2 w-4 h-4" />
<Icon as={ChevronsUpDownIcon} className="m-2 w-4 h-4" />
<Icon as={AtSignIcon} className="m-2 w-4 h-4" />
<Icon as={PaperclipIcon} className="m-2 w-4 h-4" />
<Icon as={BellIcon} className="m-2 w-4 h-4" />
<Icon as={CalendarDaysIcon} className="m-2 w-4 h-4" />
<Icon as={MessageCircleIcon} className="m-2 w-4 h-4" />
<Icon as={CheckIcon} className="m-2 w-4 h-4" />
<Icon as={ChevronDownIcon} className="m-2 w-4 h-4" />
<Icon as={ChevronUpIcon} className="m-2 w-4 h-4" />
<Icon as={ChevronLeftIcon} className="m-2 w-4 h-4" />
<Icon as={ChevronRightIcon} className="m-2 w-4 h-4" />
<Icon as={CloseIcon} className="m-2 w-4 h-4" />
<Icon as={CopyIcon} className="m-2 w-4 h-4" />
<Icon as={TrashIcon} className="m-2 w-4 h-4" />
<Icon as={DownloadIcon} className="m-2 w-4 h-4" />
<Icon as={GripVerticalIcon} className="m-2 w-4 h-4" />
<Icon as={EditIcon} className="m-2 w-4 h-4" />
<Icon as={MailIcon} className="m-2 w-4 h-4" />
<Icon as={ExternalLinkIcon} className="m-2 w-4 h-4" />
<Icon as={MenuIcon} className="m-2 w-4 h-4" />
<Icon as={InfoIcon} className="m-2 w-4 h-4" />
<Icon as={LinkIcon} className="m-2 w-4 h-4" />
<Icon as={LockIcon} className="m-2 w-4 h-4" />
<Icon as={RemoveIcon} className="m-2 w-4 h-4" />
<Icon as={MoonIcon} className="m-2 w-4 h-4" />
<Icon as={SlashIcon} className="m-2 w-4 h-4" />
<Icon as={CheckCircleIcon} className="m-2 w-4 h-4" />
<Icon as={PhoneIcon} className="m-2 w-4 h-4" />
<Icon as={HelpCircleIcon} className="m-2 w-4 h-4" />
<Icon as={RepeatIcon} className="m-2 w-4 h-4" />
<Icon as={Repeat1Icon} className="m-2 w-4 h-4" />
<Icon as={SearchIcon} className="m-2 w-4 h-4" />
<Icon as={SettingsIcon} className="m-2 w-4 h-4" />
<Icon as={LoaderIcon} className="m-2 w-4 h-4" />
<Icon as={StarIcon} className="m-2 w-4 h-4" />
<Icon as={SunIcon} className="m-2 w-4 h-4" />
<Icon as={ClockIcon} className="m-2 w-4 h-4" />
<Icon as={UnlockIcon} className="m-2 w-4 h-4" />
<Icon as={EyeIcon} className="m-2 w-4 h-4" />
<Icon as={EyeOffIcon} className="m-2 w-4 h-4" />
<Icon as={AlertCircleIcon} className="m-2 w-4 h-4" />
<Icon as={CloseCircleIcon} className="m-2 w-4 h-4" />
<Icon as={ShareIcon} className="m-2 w-4 h-4" />
<Icon as={CircleIcon} className="m-2 w-4 h-4" />
<Icon as={FavouriteIcon} className="m-2 w-4 h-4" />
<Icon as={GlobeIcon} className="m-2 w-4 h-4" />
<Icon as={ThreeDotsIcon} className="m-2 w-4 h-4" />
<Icon as={PlayIcon} className="m-2 w-4 h-4" />
</HStack>
</Center>
`,
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: {},
}}
/>
</AppProvider>

#### 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.

<iframe
style={{
borderRadius: '8px',
border: ' 1px solid rgba(0, 0, 0, 0.1)',
aspectRatio: 736 / 585,
}}
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
/>
<AppProvider>
<CodePreview
showComponentRenderer={true}
showArgsController={false}
metaData={{
code: `
<VStack space="md" className="items-center">
<Icon as={Camera} />
<Icon as={ChromeIcon} />
<Icon as={InstagramIcon} />
<Icon as={FacebookIcon} />
</VStack>
`,
transformCode: (code) => {
return transformedCode(code);
},
scope: {
Wrapper,
VStack,
ChromeIcon,
InstagramIcon,
FacebookIcon,
Icon,
Camera,
},
argsType: {},
}}
/>
</AppProvider>

#### 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., `<path>`, `<rect>` etc) with the corresponding React Native SVG components (e.g., `<Path>`, `<Rect>` etc).
- For any color property (i.e. fill, stroke etc), if you want to override that color, pass "currentColor" instead of a colorCode.

Before :
`<path fill="#FF0000" d="M10 10L20 20" /> `

After :
`<Path fill="currentColor" d="M10 10L20 20" /> `

<AppProvider>
<CodePreview
showComponentRenderer={true}
showArgsController={false}
metaData={{
code: `
const GluestackIcon = createIcon({
// createIcon function is imported from '@gluestack-ui/themed'
viewBox: '0 0 32 32',
path: (
<>
{/* Rect, Path is imported from 'react-native-svg' */}
<Rect width="32" height="32" rx="2" fill="currentColor"/>
<Path d="M9.5 14.6642L15.9999 9.87633V12.1358L9.5 16.9236V14.6642Z" fill="white"/>
<Path d="M22.5 14.6642L16.0001 9.87639V12.1359L22.5 16.9237V14.6642Z" fill="white"/>
<Path d="M9.5 19.8641L15.9999 15.0763V17.3358L9.5 22.1236V19.8641Z" fill="white"/>
<Path d="M22.5 19.8642L16.0001 15.0764V17.3358L22.5 22.1237V19.8642Z" fill="white"/>
</>
),
});
function App () {
return <Icon as={GluestackIcon} size='xl' className="bg-black"/>;
}
`,
transformCode: (code) => {
return transformedCode(code, 'function', 'App');
},
scope: {
Wrapper,
createIcon,
Icon,
Path,
Rect,
},
argsType: {},
}}
/>
</AppProvider>
5 changes: 2 additions & 3 deletions example/storybook/src/ui/components/MediaAndIcons/Icon/index.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,12 +299,11 @@ Below is a list of all of the icons in the library.
GlobeIcon,
ThreeDotsIcon,
Icon,
PlayIcon
PlayIcon,
},
argsType: {},
}}
/>

/>
</AppProvider>

#### Lucide Icons (Recommended)
Expand Down
Loading