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

Question

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

但我有一个文本标签，它是实际的图标名称（如calendar_view_day），需要从中动态获取和呈现图标组件。

我该怎么做：

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

代替：

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

Answer 1

好吧，所以我想太多了。

正确答案

原来material-ui 包含一个图标组件，可让您执行此操作……它会自行转换名称，因此接受蛇、帕斯卡和其他变体。 注意，正如 cmets 中所指出的，这将大大增加捆绑包的大小。如果您受到捆绑包大小的限制，则必须采用不同的方法从某个地方提供图标 SVG！

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

...

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

上一个答案（工作但大量矫枉过正）

创建函数到：

• 将蛇形大小写转换为 PascalCase
• 处理the material-ui icons documentation中报告的特殊情况

...然后使用material-ui图标组件。

代码如下：

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>
  )
}

Answer 2

正如上面对 thclark 回答的 cmets 所述，使用 Icon 组件的解决方案将使用 Material-UI 图标的字体版本，其中不包含完整的图标集.

通过使用相同的方法来获得正确的图标名称（从 thclark 借用）结合 React.createElement 可以解决问题。我在 TypeScript 中做到了这一点，在 vanilla javascript 中更容易。这里是 TS 版本的组件（dynamicIcon.tsx），也可以在this repo 中找到：

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});
    }
}