Components
Icon

Icon

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

Usage

import { DiamondIcon } from 'lucide-react'
import { Icon, type IconProps } from '~/components/ui/icon'

export const Demo = (props: IconProps) => {
  return (
    <Icon {...props}>
      <DiamondIcon />
    </Icon>
  )
}

Installation

1

Add Component

Insert code snippet into your project. Update import paths as needed.

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

export interface IconProps extends IconVariantProps, HTMLStyledProps<'svg'> {
  children: ReactElement
}

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

const StyledIcon = styled(ark.svg, icon)
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

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

On this page