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.