FileIcon

The icon a file gets in a file tree, drawn anywhere else the same file's name shows up: a tab, a picker row, a search result. It is the one place the library steps outside Lucide.

import { FILE_TREE_ICONS, FileIcon } from '@basmilius/react-ui';

import { FileIcon } from '@basmilius/react-ui';

const FILES = ['src/index.ts', 'App.vue', 'package.json', 'README.md', 'styles.css', 'Dockerfile', 'main.go', 'logo.svg', '.gitignore', 'notes.txt'];

export default function FileIconDemo() {
    return (
        <ul className="grid grid-cols-2 gap-x-8 gap-y-1.5 text-sm text-text">
            {FILES.map((path) => (
                <li key={path} className="flex items-center gap-2">
                    <FileIcon path={path} />
                    {path.slice(path.lastIndexOf('/') + 1)}
                </li>
            ))}
        </ul>
    );
}

The glyphs are the complete set of @pierre/trees, and their colors are the set's own, through the --file-icon-* tokens of the theme. A TypeScript blue or a Vue green is the mark of the file type, not a theme choice. Only the last segment of the path decides which icon it is. The sprite with every glyph goes into the document once, before the first icon paints.

With a file tree

A @pierre/trees tree resolves and colors its own icons inside its shadow root. Hand it FILE_TREE_ICONS as its icon configuration, so the tree and every FileIcon beside it use the same set and never disagree about a file.

Props

Prop	Type	Default
path	string		Required. Absolute or relative.
size	number	16
className	string
ref	Ref<SVGSVGElement>

FileIconProps is an exported type.