Icon for a file by type - folder, PDF, Word, Excel, CSV, CAD, image, archive, text, generic, and a distinct one for shortcuts
Tags: files icon file-type extension
Picks an icon from the entry type and the name's extension (kindForName / kindForEntry from files-core). Shape tells the kinds apart and colour reinforces it. Decorative by default; pass label when the icon stands alone.
| Kind | Extensions |
|---|---|
folder |
directories |
link |
symlinks, junctions and shortcuts |
pdf |
|
word |
doc, docx, docm, dot, dotx, rtf, odt |
excel |
xls, xlsx, xlsm, xlsb, xlt, xltx, ods |
csv |
csv, tsv |
cad |
dwg, dxf, dwf, dwfx, dgn, rvt, skp, ifc |
image |
png, jpg, jpeg, gif, webp, bmp, avif, tif, heic, svg |
archive |
zip, 7z, rar, tar, gz, tgz, bz2, xz |
text |
txt, md, log, json, xml, html, js, css, yml… |
Import
<script>
import { FileIcon } from '@classic-homes/files-svelte';
</script>Basic Usage
<FileIcon name="Lot 14 site plan.dwg" />
<FileIcon name="Plans" type="dir" />
<FileIcon kind="pdf" size={32} label="PDF document" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
kind |
FileKind |
- | Kind to show; derived from name and type if unset |
name |
string |
'' |
File name, for the extension |
type |
FileEntryType |
'file' |
Entry type: 'file', 'dir' or 'link' |
size |
number |
20 |
Pixel size |
label |
string |
- | Accessible label; omit for a decorative icon |
class |
string |
- | Classes for the wrapper |