File Format Icon
A file document icon with a colored format badge in the bottom-left corner, useful for visually representing different file types.
Installation
bunx @happlyui/cli@latest add file-format-icon
Dependencies
Registry dependencies
These are automatically installed when you add this component.
tvhapply-ui-utils
Usage
import * as FileFormatIcon from "@/components/ui/file-format-icon"
<FileFormatIcon.Root format="PDF" color="red" />
Examples
Default
A file icon with a red PDF format badge.
<FileFormatIcon.Root format="PDF" color="red" />
Colors
All available semantic colors for different file types.
<FileFormatIcon.Root format="DOC" color="blue" />
Sizes
Available in medium (40px) and small (32px) sizes.
<FileFormatIcon.Root format="PDF" color="red" size="small" />
API Reference
FileFormatIcon.Root
The file format icon SVG element.
| Prop | Type | Default | Description |
|---|---|---|---|
format | string | - | The file format text to display in the badge (e.g., 'PDF', 'DOC'). |
color | 'red' | 'orange' | 'yellow' | 'green' | 'sky' | 'blue' | 'purple' | 'pink' | 'gray' | 'gray' | The semantic color of the format badge. |
size | 'medium' | 'small' | 'medium' | The size of the icon (medium: 40px, small: 32px). |