如何动态加载material-ci-icons图标

Question

我使用Material-ui@next和material-ui-next@next

material-ui@next加载一个图标用法：

import AddIcon from 'material-ui-icons/AddIcon'; function AddIconButton(props) { return ( <AddIcon /> ); }

但我想动态加载material-ci-icons图标

例如，我有一个变量菜单

const menus = [
  {
    Name: 'menu1',
    Icons: 'face',
  },
  {
    Name: 'menu2',
    Icon: 'extension',
  }
].

如何根据菜单在页面上显示图标

Answer 1

我也遇到了这个问题。我使用此链接： dynamically load an icon。 将菜单图标名称保存在数据库中，并使用<Icon>{props.iconName}</Icon>，但是它对我不起作用。 因此，因为我没有太多时间，所以只将材质ui图标的SVG格式保存在数据库中，然后通过JSX还原它。

我从材料ui图标网页的浏览器检查元素中获得了图标的SVG格式