Skip to main content

icons

Description​

Optional. Defines the appearance of icons for files and folders

Usage​

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 folder
      • type - (optional) it can be "file" | "folder"` that indicates whether the entity is a file or folder
      • size – (optional) the size of the file in bytes (folders may omit this)
      • lazy – (optional) if true, children are loaded on demand
      • date – (optional) last modification or creation date
      • parent – (required) ID of the parent folder
      • name – (required) the name of the file or folder
      • ext – (required) file extension; empty string for folders
      • open – (optional) whether the folder is expanded in the UI
      • data – (optional) nested children (if any), each with the same structure as file
      • [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: