Small (32px)
Medium (48px)
Large (64px)
Extra Large (96px)
"use client"
import { PreskokIcon } from "@/components/ui/preskok-ui/preskok-icon"
export function PreskokIconPreskokDemo() {
return (
<div className="flex items-center gap-6">
<div className="flex flex-col items-center gap-2">
<PreskokIcon className="size-8" />
<span className="text-muted-foreground text-xs">Small (32px)</span>
</div>
<div className="flex flex-col items-center gap-2">
<PreskokIcon className="size-12" />
<span className="text-muted-foreground text-xs">Medium (48px)</span>
</div>
<div className="flex flex-col items-center gap-2">
<PreskokIcon className="size-16" />
<span className="text-muted-foreground text-xs">Large (64px)</span>
</div>
<div className="flex flex-col items-center gap-2">
<PreskokIcon className="size-24" />
<span className="text-muted-foreground text-xs">
Extra Large (96px)
</span>
</div>
</div>
)
}
Installation
CLI
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add preskok-icon
Usage
import { PreskokIcon } from "@/registry/preskok/ui/preskok-ui/preskok-icon"
export function PreskokIconDemo() {
return <PreskokIcon className="size-12" />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for sizing |
Examples
The icon scales based on the size classes you provide:
<PreskokIcon className="size-8" /> // Small (32px)
<PreskokIcon className="size-12" /> // Medium (48px)
<PreskokIcon className="size-16" /> // Large (64px)
<PreskokIcon className="size-24" /> // Extra Large (96px)