Skip to main content

Setting icons to files and folders

The icons are displayed in UI for files and folders as well as in the preview panel. The widget allows using default icons or setting your custom ones.

Default icons​

Default icons hosted on our CDN are shown if the icons property is not defined.

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.

Using simple icons​

The library provides simple icons (font icons) for files and folders. To use simple icons, set the icons value to 'simple'.

Example:

<script>
  import { getData, getDrive } from "./common/data";
  import { Filemanager } from "wx-svelte-filemanager";

</script>

<Filemanager data={getData()} drive={getDrive()} icons={'simple'} />

Adding custom icons​

You can add your own icons by providing URL for files/folders.

To add URL for icons of files/folders, apply the icons property by adding a function that should return a string which is the URL of the icon to be displayed. The function is called each time an icon is required.
The function has the size parameter ("big" or "small") to indicate which icon is needed. By default, the "big" size is for cards and the preview panel while "small" is for the table in the panels and table modes.

Example:

<script>
  import { Filemanager } from "wx-svelte-filemanager";

  const server = "https://some-backend-url";

  let rawData = $state([]);
  fetch(server + "/files")
    .then((data) => data.json())
    .then((data) => (rawData = data));
  

  function iconsURL(file, size) {
    if (file.type !== "file") return server + `/icons/${size}/${file.type}.svg`;

    return server + `/icons/${size}/${file.ext}.svg`;
  }
</script>

<Filemanager data={rawData} previews={previewURL} icons={iconsURL} />

Adding file previews​

To show the file preview in the preview panel, you should apply the preview property and specify a function that returns a path to the preview according to the passed parameters.

<script>
  import { Filemanager } from "wx-svelte-filemanager";

  const server = "https://some-backend-url";

  let rawData = $state([]);
  fetch(server + "/files")
    .then((data) => data.json())
    .then((data) => (rawData = data));
  

  function previewURL(file, width, height) {
    const ext = file.ext;
    if (ext === "png" || ext === "jpg" || ext === "jpeg") return server + `/preview?width=${width}&height=${height}&id=${encodeURIComponent(file.id)}`;

    return false;
  }

  function iconsURL(file, size) {
    if (file.type !== "file") return server + `/icons/${size}/${file.type}.svg`;

    return server + `/icons/${size}/${file.ext}.svg`;
  }
</script>

<Filemanager data={rawData} previews={previewURL} icons={iconsURL} />
note

Previews will be shown in the cards mode and preview panel. For files without a preview, icons will be shown.

Related articles:

Related samples: Simple icons