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
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 = [];
$: {
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 = [];
$: {
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} />
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