Ruby 如何在Hyperstack中导入材质图标？

我尝试在我的Hyperstack应用程序中使用MaterialUi的

（如此处），但下面出现了错误

我用Thread安装了

@material ui/icons

，然后像这样导入了

/app/javascript/packs/application.js

import * as Mic from '@material-ui/icons';
global.Mic = Mic;

然后运行bin/webpack，没有错误

然后我在一个组件中有这样的东西：

   Mui.Toolbar() do

        if @menu == 'true'
          Mui.IconButton() do
            Mic.MenuIcon() {}
          end

...

但我有一个错误：

Uncaught error: RuntimeError: could not import a react component named: Mic.MenuIcon

我做错了什么

---

非常感谢您的帮助：）

我没有将

MenuIcon

视为语义UI中的类，并且在按钮上使用了如下图标：

所以，如果您像这样导入材质UI

Sem = require('semantic-ui-react');

require('../../../vendor/semantic/dist/semantic.css');

Sem.按钮（图标：true，标签位置：'left'，主按钮：true）do
Sem.Icon（名称：：heart）
SPAN{“添加爱”}
结束

您可能还必须导入图标库（在NPM中或仅通过在布局中包含材质CSS）

我发现导入图标（以及所有语义CSS）的最佳方法是使用纱线构建，然后通过这样的网页导入

Sem = require('semantic-ui-react');

require('../../../vendor/semantic/dist/semantic.css');

---

我回答的问题就好像你在使用语义用户界面，而你问的是材料用户界面，所以我会把第一个答案留给使用语义的人，现在回答材料用户界面

图标的最简单方法是在布局HTML中导入材质图标库

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

如果要将整个材质UI库作为一个对象导入（根据您的问题），则它将是：

Mic.IconButton { Mic.Icon(fontSize: :large) { 'expand_more' } }

另外，我认为

@materialui/icons'

不包含任何方法，只包含图标本身，因此您可以导入它，然后使用图标（因为资源将通过Webpack捆绑）