reactjs - 如何使用它的snake_case名称动态加载图标(React，material-ui)

Question

通常我会通过直接导入来使用material-ui图标 per the material-ui instructions .

但是我有一个文本标记，它是实际的图标名称(如calendar_view_day)，并且需要从中动态获取和渲染图标组件。

我怎样才能做到:

render() {
  return (
    <Icon name="calendar_view_day" color="primary" />
  )
}

而不是:

render() {
  return (
    <CalendarViewDay color="primary" />  // Imported by name
  )
}

Answer 1

后期编辑

编辑 2:在使用以下内容之前，请先查看 @Roozbeh 在 2023 年中期关于使用字体 Material 图标的最新答案。

<小时/>

编辑 1:此答案适用于 MUI v4，MUI v5 答案如下(但未经我测试)

正确答案

结果 material-ui 包含一个图标组件，允许您执行此操作...并且它会自行转换名称，因此接受 Snake、Pascal 和其他变体。 请注意，正如评论中指出的那样，这将大大增加 bundle 的大小。如果您的 bundle 大小受到限制，则必须采取不同的方法从某处提供图标 SVG!

import Icon from '@material-ui/core/Icon'

...

render() {
  return (
    <Icon>{props.iconName}</Icon>
  )
}

之前的答案(有效但过度杀伤力)

创建函数:

• 将snake_case转换为PascalCase
• 处理the material-ui icons documentation中报告的特殊情况

...然后使用material-ui Icon组件。

代码如下:

import Icon from '@material-ui/core/Icon'

function upperFirst(string) {
  return string.slice(0, 1).toUpperCase() + string.slice(1, string.length)
}

function fixIconNames(string) {
  const name = string.split('_').map(upperFirst).join('')
  if (name === '3dRotation') {
    return 'ThreeDRotation'
  } else if (name === '4k') {
    return 'FourK'
  } else if (name === '360') {
    return 'ThreeSixty'
  }
  return name
}

...

render() {
  const iconName = fixIconNames(props.iconName)
  return (
    <Icon>{props.iconName}</Icon>
  )
}