Skip to main content

icons

Description​

Optional. Defines the appearance of icons for files and folders

Usage​

icons?: "simple" | (entity:{}, size:"small" | "big") => string;

Parameters​

The property value can be set to simple to display simple icons (font icons) for files and folders.

The property can be a function that takes two parameters:

  • entity - (required) an object representing a file or folder
  • size - (required) the size of an icon that 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 "@wx/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}
 //other settings />

Related articles: