# code/editor/FileIcon (zidane-ui/code/editor)

Import: `import { … } from 'zidane-ui/code/editor'`. Source: [ui/src/code/editor/FileIcon.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/FileIcon.tsx).

## Components

### `FileIcon`

Component.

A file's coloured icon, resolved from its name the way the Files tab resolves it. Decorative (`aria-hidden`).

```ts
const FileIcon: MemoExoticComponent<(__namedParameters: FileIconProps) => Element>
```

Source: [ui/src/code/editor/FileIcon.tsx:72](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/FileIcon.tsx#L72)

### `TreeChevron`

Component.

The tree's folder chevron (points down; turned to point right while closed).

```ts
function TreeChevron(props: TreeChevronProps): Element
```

**Parameters**

- `props` (`TreeChevronProps`): `open`: whether the folder is expanded; `className`: extra classes on the svg.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the svg.
- `open` (`boolean`): The folder is expanded: the chevron points down.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/editor/FileIcon.tsx:45](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/FileIcon.tsx#L45)

## Interfaces

### `FileIconProps`

Interface.

Props for [`FileIcon`](https://zidane.si/docs/reference/ui-code-editor-file-icon.md#FileIcon).

```ts
interface FileIconProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `path` (`string`): The file's path or name; its icon is resolved from it.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/editor/FileIcon.tsx:62](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/FileIcon.tsx#L62)

### `TreeChevronProps`

Interface.

Props for [`TreeChevron`](https://zidane.si/docs/reference/ui-code-editor-file-icon.md#TreeChevron).

```ts
interface TreeChevronProps
```

**Properties**

- `className?` (`string`): Extra classes on the svg.
- `open` (`boolean`): The folder is expanded: the chevron points down.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/editor/FileIcon.tsx:31](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/FileIcon.tsx#L31)