Components

Icon

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

size: md

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

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

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

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

Usage

import { Icon } from '~/components/ui/icon'

Installation

npx @park-ui/cli components add icon

1

Add Styled Primitive

Copy the code snippet below into ~/components/ui/styled/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 { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { icon } from 'styled-system/recipes'

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

No snippet found

2

Add Re-Export

To improve the developer experience, re-export the styled primitives in~/components/ui/icon.tsx.

export { Icon, type IconProps } from './styled/icon'

export { Icon, type IconProps } from './styled/icon'

3

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