如何在 Hyperstack 中导入 Material-Icons？答案

【问题标题】：How to import Material-Icons in Hyperstack?如何在 Hyperstack 中导入 Material-Icons？
【发布时间】：2019-08-25 18:41:32
【问题描述】：

我尝试在我的 Hyperstack-App 中使用 MaterialUi 的 <MenuIcon />（就像这里的 https://material-ui.com/demos/app-bar/），但出现以下错误。

我用 yarn 安装了@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

我做错了什么？

非常感谢您的帮助:)

【问题讨论】：

【解决方案1】：

我没有将MenuIcon 视为语义 UI 中的类，并且在按钮上使用了这样的图标：

所以，如果你像这样导入 Material UI

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

Sem.Button(icon: true, labelPosition: 'left', primary: true) do
    Sem.Icon(name: :heart)
    SPAN { "Add Love" }
end

您可能还需要导入您的图标库（在 NPM 中或简单地将 Material CSS 包含在您的布局中。

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

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

【讨论】：

【解决方案2】：

我回答的问题就像您使用语义 UI 而您询问的是 Material UI 一样，所以我将把第一个答案留给任何使用 Semantic 的人，现在回答 Material UI。

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

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

然后像这样在 Material UI 中简单地使用它们：

IconButton { Icon(fontSize: :large) { expand_icon } }

如果您将整个 Material UI 库作为一个对象导入（根据您的问题），那么它将是：

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

另外，我认为@material-ui/icons' 不包含任何方法，只包含图标本身，因此您可以只导入它然后使用图标（因为资源将由 Webpack 捆绑）

【讨论】：