Как я могу динамически загружать значок, используя его имя змеиного случая (React, material-ui)

Итак, я сильно переосмыслил это.

Правильный ответ

Оказывается, material-ui включает в себя компонент значка, который позволяет вам это делать... и сам конвертирует имена, поэтому принимает змею, паскаль и другие варианты. ОСТОРОЖНО, это значительно увеличит размер пакета, как указано в комментариях. Если вы ограничены в размере пакета, вам придется использовать другой подход к обслуживанию значков SVG откуда-то!

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

...

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

Предыдущий ответ (работает, но слишком много)

Создайте функцию для:

• преобразовать змеиный случай в PascalCase
• Обработка особых случаев, о которых сообщается в документация по иконкам material-ui

... Затем используйте компонент 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>
  )
}

Как указано в комментариях к ответу Кларк выше, решение, использующее компонент Icon, будет использовать шрифтовую версию значков Material-UI, которая не содержит полного набора значков.

Использование того же метода для получения правильного имени значка (позаимствованного из Кларк) в сочетании с React.createElement делает свое дело. Я сделал это в TypeScript, в ванильном javascript это еще проще. Вот компонент в версии TS (dynamicIcon.tsx), также доступный в это репо:

import * as React from 'react';
import * as Icons from '@material-ui/icons/';

type IconType = typeof import('@material-ui/icons/index');

interface DynamicIconProps {
    iconName: string,
    className: string
}

function upperFirst(string:string) {
    return string.slice(0, 1).toUpperCase() + string.slice(1, string.length)
}
  
function fixIconNames(string: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;
}

export default class DynamicIcon extends React.Component<DynamicIconProps> {
    constructor(props: DynamicIconProps) {
        super(props);
    }

    render() {
        return React.createElement(Icons[fixIconNames(this.props.iconName)! as keyof IconType], {className: this.props.className});
    }
}