search

Appsilon / shiny.fluent

Microsoft's Fluent UI for Shiny apps
https://appsilon.github.io/shiny.fluent
276 stars 33 forks source link

Make icons work offline #84

Open kamilzyla opened 3 years ago

kamilzyla commented 3 years ago

For Fluent UI icons to work, initializeIcons() must be called before any components are rendered. Currently we call it here without providing any arguments - this way a default CDN is used. As a result, the icons won't work without access to that CDN, e.g. offline or behind a firewall.

I see two ways to overcome it:

  1. Provide a mechanism for setting a custom CDN to initialize icons. This way users could configure their own CDN.
  2. Include the icons in the package itself.
BorisDelange commented 2 months ago

Hi,

I’m not sure if you’ve encountered the same issue, but starting today, Fluent icons have stopped appearing in my Shiny app that uses shiny.fluent.

The browser console shows the following error:

Blocking a cross-origin request: The Same Origin Policy does not allow access to the remote resource located at https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff. Reason: CORS request failed. Status code: (null).

To resolve this in my Shiny app, I copied all the font files locally into the www/fonts folder and created a custom CSS file to load these fonts.

With this approach, the icons are displaying normally again.

Here's the code :

In ui.R:

addResourcePath("www", system.file("www", package = "linkr"))

tags$head(
      # Add fluent icons
      tags$link(rel = "stylesheet", href = "www/css/fluent-icons.css"),
    )

I hope this will help anyone facing the same issue.