Icon using custom svg

[jonekeat]

Is there a way to reproduce the examples in https://developer.microsoft.com/en-us/fluentui#/controls/web/icon, for using custom svg icon?

I would like to include my custom svg icon, may I know is it possible in the current stage of shiny.fluent pkg?

[anirbanshaw24]

Hi,
Can you try this function. This should work wherever icons are passed with icon() function. If you are able to use:
icon = icon("thumbs-up", lib = "glyphicon")' you should be able to use: icon = inline_icon("path_to_image.svg")`
Function:

inline_icon <- function(img_path) {
  icon_created <- shiny::tags$i(span(style = "padding:10px; ",
                                     tags$img(
                                       src = img_path,
                                       width = "48px",
                                       height = "48px"
                                     )))
  return(icon_created)
}

Let us know if this works. :)

[jonekeat]

Thanks @anirbanshaw24 , but I have come up with a solutions when refer to Keytips example, the solution is posted at https://stackoverflow.com/a/68220638/14140854

If possible, I will suggest to add a doc (or vignette) about extending shiny.fluent with jsmodule['@fluentui/react'], as there are limited application covered by R code

[jonekeat]

For completeness, I forward the solutions posted at https://stackoverflow.com/a/68220638/14140854

I have come up with a solution, referring to shiny.fluent examples for Keytips

library(shiny)
library(shiny.fluent)

jscode <- "
jsmodule['@fluentui/react'].registerIcons({
  icons: {
    'csv': (
      React.createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 96 96', fill: '#FFF', 'stroke-miterlimit': '10', 'stroke-width': '2' },
      React.createElement('path', { stroke: '#000000', d: 'M67.1716,7H27c-1.1046,0-2,0.8954-2,2v78 c0,1.1046,0.8954,2,2,2h58c1.1046,0,2-0.8954,2-2V26.8284c0-0.5304-0.2107-1.0391-0.5858-1.4142L68.5858,7.5858 C68.2107,7.2107,67.702,7,67.1716,7z' }),
      React.createElement('path', { fill: '#000000', d: 'M71 71h-3v-3h-.3173c-1.4089 2.3002-3.4822 3.45-6.22 3.45-2.0141 0-3.5908-.5062-4.7292-1.5187-1.1389-1.0125-1.708-2.3559-1.708-4.0312 0-3.5873 2.2244-5.6747 6.6742-6.2625l6.0621-.8063c0-3.2625-1.3891-4.8937-4.1664-4.8937-2.4357 0-4.6339.7875-6.5952 2.3625v-3.15c1.9874-1.2 4.278-1.8 6.8717-1.8C68.6236 51.35 71 53.7378 71 58.5125V71zM68 61.2422l-4.8242.6641c-1.4844.2085-2.6045.5762-3.3594 1.1035-.7554.5273-1.1328 1.4619-1.1328 2.8027 0 .9766.3481 1.7744 1.0449 2.3926.6963.6187 1.624.9277 2.7832.9277 1.5884 0 2.9004-.5566 3.9355-1.6699S68 64.9404 68 63.2344V61.2422zM80.1334 67l-3.252 10h-2.3781l2.3781-10H80.1334z' }),
      React.createElement('path', { fill: 'none', stroke: '#000000', d: 'M67,7v18c0,1.1046,0.8954,2,2,2h18' }),
      React.createElement('path', { fill: '#000000', d: 'M12,74h32c2.2091,0,4-1.7909,4-4V38c0-2.2091-1.7909-4-4-4H12c-2.2091,0-4,1.7909-4,4v32 C8,72.2091,9.7909,74,12,74z' }),
      React.createElement('path', { d: 'M16.9492,66l7.8848-12.0337L17.6123,42h5.8115l3.9424,7.6486c0.3623,0.7252,0.6113,1.2668,0.7471,1.6236 h0.0508c0.2617-0.58,0.5332-1.1436,0.8164-1.69L33.1943,42h5.335l-7.4082,11.9L38.7168,66H33.041l-4.5537-8.4017 c-0.1924-0.3116-0.374-0.6858-0.5439-1.1215H27.876c-0.0791,0.2684-0.2549,0.631-0.5264,1.0878L22.6592,66H16.9492z' }))
    ) 
  }
});

const iconClass = jsmodule['@fluentui/react'].mergeStyles({
  fontSize: 50,
  height: 50,
  width: 50,
  margin: '0 25px',
});"

ui <- fluidPage(
  tags$head(tags$script(HTML(jscode))),     
  tags$div(
    FontIcon(ariaLabel = "CSV logo", iconName = "csv", className = JS("iconClass"))
  )
)

server <- function(input, output, session) {
}

shinyApp(ui,server)

We can replaced the raw svg in React.createElement with

React.createElement('img', { src: '<image path>.svg',
            alt: 'CSV logo' })