Fonts and icons with offline React File Manager

Lou

Hello,

I'm working on a React application that may be used without an Internet connection. Currently, when offline, File Manager icons are missing. If I understand correctly, this is normal, since fonts/icons are downloaded from a CDN by default.

The page https://docs.svar.dev/react/filemanager/guides/configuration/work_with_icons/ mentions the possibility to use simple icons by passing icons="simple". On my machine, icons are still missing when using this prop while offline. In addition, Typescript issues an error because it only expects a function as icons. When online, icons look the same as without icons="simple". Maybe I did not understand correctly what this prop is supposed to do? Is it meant to allow offline use?

tasha

Hi Lou,

When your React app is used offline, the browser can’t load external resources (like the default icon CDN).
To keep icons visible offline, you need to ship the SVG files as part of your own build, and then tell Filemanager where to find them locally.
For that you can use icons as function.
Here you can read how to add custom icons.
The icons prop accepts a function that returns a string URL: fits for a local file path like /icons/big/pdf.svg.

Lou

Hi Tasha,

Thank you for your quick answer. I have a few follow-up questions.

Are we allowed to download the icons from the CDN and ship them as part of our own build? If yes, how can we download the icons? Inspecting the network events, I can see the following files being loaded from the cdn:

https://cdn.svar.dev/fonts/open-sans/600.woff2
https://cdn.svar.dev/fonts/open-sans/regular.woff2
https://cdn.svar.dev/fonts/wxi/wx-icons.css
https://cdn.svar.dev/fonts/wxi/wx-icons.woff?<a hex string>
Are the icons part of one of these files? Maybe icons are characters of a special font?

I also noticed that (text) fonts seems to be different when offline. Can we also download the fonts and ship them as part of our build?

Best regards

tasha

Hi,

Thank you for the detailed follow-up questions
You are right. The icons are part of a custom icon font.
In the wx-icons.css:

The @font-face rule loads wx-icons.woff and wx-icons.woff2: these font files contain all the icon glyphs;
Each CSS class like .wxi-file maps to a specific character in that font via content (for example, .wxi-file uses \f132)

This means to make icons work offline, you need to download both the icon font files and the text font files.

Are we allowed to download the icons from the CDN and ship them as part of our own build?

Yes. The file manager component is open-source, and the font files on the CDN are part of the SVAR component library. They're distributed for use with the library under MIT license.

If yes, how can we download the icons?

Download these files while you have internet:

text
https://cdn.svar.dev/fonts/wxi/wx-icons.css
https://cdn.svar.dev/fonts/wxi/wx-icons.woff
https://cdn.svar.dev/fonts/wxi/wx-icons.woff2
https://cdn.svar.dev/fonts/open-sans/regular.woff2
https://cdn.svar.dev/fonts/open-sans/600.woff2

Place them in your project, for example:

text
public/fonts/
wx-icons.css
wx-icons.woff
wx-icons.woff2
open-sans-regular.woff2
open-sans-600.woff2

The wx-icons.css already uses relative paths (url("./wx-icons.woff...")), so if you keep the .woff files next to it, you don't need to change anything.
For the text font, create a small CSS override for Open Sans that points to your local files instead of the CDN.
Import your local CSS files alongside the library styles, and everything will load from your own build, fully offline.

We also plan to add a dedicated API in the future to make configuring local fonts and icons more straightforward, so you won't need these manual steps.

Lou

Thank you for your detailed answer.
"Embedding" the fonts as per your instructions was very straightforward. However I noticed that file icons are missing:
With fonts, without icons
Sorry, I can't manage to share the images inline, so here's a link to it

So I thought maybe file icons are not part of the icon fonts we discussed. I deleted the fonts and instead, I used the custom icon feature you mentioned earlier. Then icons are present in the "main pane" but not in the tree view nor in the headers:
Without fonts, with icons
Screenshot

I could do both: embed fonts and implement custom icons, but then icons won't have the same look in the tree view and the main pane. It should then be possible to use the tree view folder icon as a custom icon (which would be used by the main pane). Then, the other icons would need to be consistent with the tree view folder icon. So I was wondering if you had any other suggestion. For example, is it possible for the tree view to use the icons contributed through the Custom icons feature or something similar?

Thank you

tasha

You are correct, the file‑type icons (pdf, jpg, doc, …) are not part of the wx-icons font. The font provides only the UI icons (arrows, folder, file, etc.) and the tree view folder icon. The specific file‑type icons are separate SVG files loaded from the CDN.
To keep the original look everywhere (tree view + main pane) without any CDN requests, you need both the local fonts and a custom icons function that points to local copies of the original file‑type SVGs.

Keep the local fonts (you already did this)
Ensure your local wx-icons and Open Sans are loading correctly. Your CSS override should be imported after the library styles.
Download the file‑type SVGs
The Filemanager loads these from https://cdn.svar.dev/icons/filemanager/vivid/{size}/{icon}.svg, where {size} is bigor small, and {icon} is one of the supported extensions.

Supported extensions:
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, file.

Download each of them from the CDN for both big and small sizes, and place them in your project

Write a local icons function and pass it to the component
This function will return the path to your local SVGs instead of the CDN. It should return false for folders (so the font icon is used).
For example:

const localIcons = (file, size) => {
  if (file.type === "folder") return false;

  const whitelist = {
    "7z":1, rar:1, zip:1, css:1, html:1, js:1, php:1, md:1, xml:1, sql:1,
    aif:1, mid:1, mp3:1, waw:1, wma:1, doc:1, docx:1, txt:1,
    avi:1, mov:1, mp4:1, mpeg:1, mpg:1, pdf:1, xls:1, xlsx:1,
    gif:1, jpg:1, jpeg:1, png:1, psd:1, tiff:1, svg:1
  };

  const { ext, type } = file;
  let icon;
  if (type && type !== "file" && whitelist[type]) {
    icon = type;
  } else if (ext) {
    icon = whitelist[ext.toLowerCase()] ? ext.toLowerCase() : "file";
  } else {
    icon = "unknown";
  }

  return `/icons/vivid/${size}/${icon}.svg`;
};

<FileManager data={data} icons={localIcons} />

Please try this approach. If anything still doesn’t work, let me know exactly what you’re seeing and I’ll try to help you.