icons
Description
Optional. Defines the appearance of icons for files and foldersUsage
icons?: (
file: {
id: string,
type?: "file" | "folder",
size?: number,
lazy?: boolean,
date?: Date,
parent: string,
name: string,
ext: string,
open?: boolean,
data?: {
id: string,
type?: "file" | "folder",
size?: number,
lazy?: boolean,
date?: Date,
parent: string,
name: string,
ext: string,
$level: number,
open?: boolean,
data?: any[],
[key: string]: any,
}[],
[key: string]: any,
},
size: "big" | "small"
) => string;
Parameters
The icons property is a function that provides custom icons for files and folders. It takes two parameters:
-
file
– (required) an object representing the file or folder entity for which an icon should be displayed with the next parameters:id
– (required) unique identifier of the file or foldertype
- (optional) it can be "file" | "folder"` that indicates whether the entity is a file or foldersize
– (optional) the size of the file in bytes (folders may omit this)lazy
– (optional) iftrue
, children are loaded on demanddate
– (optional) last modification or creation dateparent
– (required) ID of the parent foldername
– (required) the name of the file or folderext
– (required) file extension; empty string for foldersopen
– (optional) whether the folder is expanded in the UIdata
– (optional) nested children (if any), each with the same structure asfile
[key: string]: any
– additional metadata fields provided by the backend
-
size
("small" | "big") – (required) the size can be "small" or "big"; by default, "small" is for the table in the panels and table modes and "big" is for cards and the preview panel
The function is called each time an icon is required. The function should return a string which is the URL of the icon to be displayed.
The preview panel has its specific icon for each of the following case:
- when no item is selected (the entity type is "none")
- when multiple items are selected (the entity type is "multiple")
- when the search is activated (the entity type is "search")
If the icons
property is not defined, default icons hosted on our CDN will be shown.
Supported extensions for the provided icons: "7z", rar, zip, css, html, js, php, md, xml, sql, aif, mid, mp3, waw, wma, doc, docx, txt, avi, mov, mp4, mpeg, mpg, pdf, xls, xlsx, gif, jpg, jpeg, png, psd, tiff, svg, folder, file
If you use your custom icons, you can add other extensions.
Example
In the example below we specify a function that returns a path to the icons for files.
<script>
import {Filemanager} from "@svar-ui/svelte-filemanager";
const server = "https://some-backend-url";
function iconsURL(file, size) {
return server + `/icons/${size}/${file.type}.svg`;
}
</script>
<Filemanager
data={rawData}
icons={iconsURL}
/>
Related articles: