Make it yours

Copy and paste the following code into your panda.config.ts and update if needed.

import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'

export default defineConfig({
  preflight: true,
  presets: [
    '@pandacss/preset-base',
    createPreset({
      accentColor: 'neutral',
      grayColor: 'neutral',
      borderRadius: 'sm',
    }),
  ],
  include: ['./src/**/*.{js,jsx,ts,tsx,astro,vue}'],
  jsxFramework: '__JS_FRAMEWORK__',
  outdir: 'styled-system',
})

Components

Icon

A graphical representation of an action, file, or concept.

Usage

size: md

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 icon

1

Styled Primitive

Copy the code snippet below into ~/components/ui/primitives/icon.tsx

import { ark } from '@ark-ui/react/factory'
import { type ComponentProps, forwardRef } from 'react'
import { styled } from 'styled-system/jsx'
import { icon } from 'styled-system/recipes'

export type IconProps = ComponentProps<typeof StyledIcon>
const StyledIcon = styled(ark.svg, icon)

export const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
  <StyledIcon asChild ref={ref} {...props} />
))

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 found

Extend ~/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',
      },
    },
  },
})