## Overview [#overview]
`MimeTypeIcon` resolves an icon from either a MIME type or a file extension. Use it anywhere a file needs a compact visual identifier, such as attachment lists, upload flows, file cards, and document pickers.
## Usage [#usage]
```tsx
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";
```
```tsx
```
## Examples [#examples]
### MIME Types [#mime-types]
```tsx
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";
;
```
### File Names [#file-names]
```tsx
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";
;
```
### Sizes [#sizes]
```tsx
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";
Small
Default
Large
Extra Large
;
```
### File List [#file-list]
```tsx
import { MimeTypeIcon } from "@tilt-legal/cubitt-components/mime-type";
const files = [
{ name: "contract.pdf", size: "2.4 MB" },
{ name: "budget.xlsx", size: "1.2 MB" },
{ name: "presentation.pptx", size: "5.8 MB" },
{ name: "logo.png", size: "384 KB" },
{ name: "backup.zip", size: "12.5 MB" },
];
{files.map((file) => (
{file.name}
{file.size}
))}
;
```
## Virtual File Icon [#virtual-file-icon]
`VirtualFileIcon` renders the blank document shape with a consumer-provided icon centered on top. Use it for derived files, transcripts, summaries, or other virtual file types that do not map to a real MIME type.
```tsx
import { VirtualFileIcon } from "@tilt-legal/cubitt-components/mime-type";
import { Scroll, Sparkle } from "@tilt-legal/cubitt-icons/ui/outline";
```
## API Reference [#api-reference]
### MimeTypeIcon [#mimetypeicon]
| Prop | Type | Default | Description |
| ----------- | ------------------ | ------- | ------------------------------------------------------------------------ |
| `mimeType` | `string` | – | MIME type to resolve, for example `application/pdf`. |
| `fileName` | `string` | – | File name or extension to resolve, for example `document.pdf` or `.pdf`. |
| `className` | `string` | – | Additional classes. Use this for sizing, such as `size-5`. |
| `size` | `number \| string` | – | Explicit size passed through to the underlying icon component. |
Provide either `mimeType` or `fileName`. If both are provided, `mimeType` is tried first and `fileName` is used as a fallback.
### VirtualFileIcon [#virtualfileicon]
| Prop | Type | Default | Description |
| ----------- | ------------------ | ------- | --------------------------------------------------------------- |
| `children` | `ReactNode` | – | Icon to render centered on the blank document outline. |
| `className` | `string` | – | Additional classes. Use this for sizing, such as `size-[62px]`. |
| `size` | `number \| string` | – | Explicit size passed through to the blank document icon. |
## Supported File Types [#supported-file-types]
`MimeTypeIcon` supports common document, image, video, audio, email, development, archive, and executable file types. Unknown MIME types or extensions render the generic blank file icon.
### Documents [#documents]
* PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX
* TXT, CSV
### Media [#media]
* JPEG, JPG, PNG, GIF, SVG, WEBP, TIFF, ICO
* MP4, AVI, MOV, MPG
* MP3, WAV, AAC, FLAC, M4A, WMA
### Other [#other]
* EML, MSG
* HTML, CSS, JS, JSON, JAVA
* ZIP, RAR, DMG, EXE