shiny.fluent: 在下拉列表中包含自定义 svg 图标

Question

有没有办法在 shiny.fluent R 包中重现 https://developer.microsoft.com/en-us/fluentui#/controls/web/icon 中使用自定义 svg 图标的示例？

这是我的 R 脚本，但它不起作用：

library(shiny)
library(shiny.fluent)

jscode <- "
registerIcons({
  icons: {
    'csv': (
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='#FFF' stroke-miterlimit='10' stroke-width='2'>
        <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'/>
        <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'/>
        <path fill='none' stroke='#000000' d='M67,7v18c0,1.1046,0.8954,2,2,2h18'/>
        <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'/>
        <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'/>
      </svg>
    ) 
  },
});

const iconClass = mergeStyles({
  fontSize: 50,
  height: 50,
  width: 50,
  margin: '0 25px',
});"

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

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

shinyApp(ui,server)

Answer 1

我想出了一个解决方案，参考 shiny.fluent 示例 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)

我们可以将 React.createElement 中的原始 svg 替换为

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

shiny.fluent: 在下拉列表中包含自定义 svg 图标

shiny.fluent: include custom svg icon in dropdown

html

r

shiny

reactjs

fluent-ui