Park UI

Usage

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

Installation

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

import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
import { forwardRef } from 'react'
import { tv, type VariantProps } from 'tailwind-variants'

export interface IconProps extends IconVariantProps, HTMLArkProps<'svg'> {}

export const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
  const { size, className, ...buttonProps } = props
  return <ark.svg asChild className={styles({ size, className })} ref={ref} {...buttonProps} />
})

Icon.displayName = 'Icon'

type IconVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'icon',
    defaultVariants: { size: 'md' },
    variants: {
      size: {
        xs: 'icon--size_xs',
        sm: 'icon--size_sm',
        md: 'icon--size_md',
        lg: 'icon--size_lg',
        xl: 'icon--size_xl',
        '2xl': 'icon--size_2xl',
      },
    },
  },
  { twMerge: false },
)

import type { HTMLArkProps } from '@ark-ui/solid'
import { splitProps } from 'solid-js'
import { Dynamic } from 'solid-js/web'
import { type VariantProps, tv } from 'tailwind-variants'

export interface IconProps extends IconVariantProps, HTMLArkProps<'svg'> {}

export const Icon = (props: IconProps) => {
  const [variantProps, iconProps] = splitProps(props, ['size', 'class'])
  const [localProps, rootProps] = splitProps(iconProps, ['as'])
  const className = styles(variantProps)

  return <Dynamic component={localProps.as} class={className} {...rootProps} />
}

type IconVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'icon',
    defaultVariants: { size: 'md' },
    variants: {
      size: {
        xs: 'icon--size_xs',
        sm: 'icon--size_sm',
        md: 'icon--size_md',
        lg: 'icon--size_lg',
        xl: 'icon--size_xl',
        '2xl': 'icon--size_2xl',
      },
    },
  },
  { twMerge: false },
)

Not yet available