FileTypeIcon
Generic file icon
All Icons
Usage
tsx
import { FileTypeIcon, getFileIconType } from '@tryvienna/ui'
<div className="grid grid-cols-4 gap-4">
{ALL_TYPES.map(({ type, label }) => (
<div key={type} className="flex items-center gap-2 px-2 py-1">
<FileTypeIcon type={type} size={20} />
<span className="text-xs text-muted-foreground">{label}</span>
</div>
))}
</div>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Examples
All Icons
All Icons
tsx
<div className="grid grid-cols-4 gap-4">
{ALL_TYPES.map(({ type, label }) => (
<div key={type} className="flex items-center gap-2 px-2 py-1">
<FileTypeIcon type={type} size={20} />
<span className="text-xs text-muted-foreground">{label}</span>
</div>
))}
</div>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Sizes
Sizes
tsx
<div className="flex items-center gap-4">
<TypeScriptFileIcon size={12} />
<TypeScriptFileIcon size={16} />
<TypeScriptFileIcon size={20} />
<TypeScriptFileIcon size={24} />
<TypeScriptFileIcon size={32} />
</div>1
2
3
4
5
6
7
2
3
4
5
6
7
API Reference
FileTypeIcon
| Prop | Type | Default | Description |
|---|---|---|---|
type | FileIconType | - |
getFileIconType
Get icon type from filename, extension, or MIME type
Data Attributes
| Component | data-slot |
|---|---|
FileTypeIcon | "file-icon" |
getFileIconType | "get-file-icon-type" |