Icon
A graphical representation of an action, file, or concept.
Usage
import { DiamondIcon } from 'lucide-react'
import { Icon, type IconProps } from '~/components/ui'
export const Demo = (props: IconProps) => {
return (
<Icon {...props}>
<DiamondIcon />
</Icon>
)
}
Installation
npx @park-ui/cli components add icon1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/icon.tsx
import { ark } from '@ark-ui/react/factory'
import { styled } from 'styled-system/jsx'
import { icon } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'
export type IconProps = ComponentProps<typeof Icon>
export const Icon = styled(ark.svg, icon, {
defaultProps: { asChild: true },
})
import { type Assign, type HTMLArkProps, ark } from '@ark-ui/solid'
import { styled } from 'styled-system/jsx'
import { type IconVariantProps, icon } from 'styled-system/recipes'
import type { JsxStyleProps } from 'styled-system/types'
export interface IconProps extends Assign<JsxStyleProps, HTMLArkProps<'div'>>, IconVariantProps {}
export const Icon = styled(ark.div, icon)
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export { Icon, type IconProps } from './icon'2
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
import { defineRecipe } from '@pandacss/dev'
export const icon = defineRecipe({
className: 'icon',
base: {
color: 'currentcolor',
display: 'inline-block',
flexShrink: '0',
verticalAlign: 'middle',
lineHeight: '1em',
},
defaultVariants: {
size: 'md',
},
variants: {
size: {
xs: {
w: '3',
h: '3',
},
sm: {
w: '4',
h: '4',
},
md: {
w: '5',
h: '5',
},
lg: {
w: '6',
h: '6',
},
xl: {
w: '7',
h: '7',
},
'2xl': {
w: '8',
h: '8',
},
},
},
})