Как импортировать Material-Icons в Hyperstack? - PullRequest
Новая
       27

Как импортировать Material-Icons в Hyperstack?

2 голосов
/ 04 апреля 2019

Я пытаюсь использовать MaterialUi <MenuIcon /> (как здесь https://material -ui.com / demos / app-bar / ) в моем приложении Hyperstack-App, но я получаю ошибку ниже.

Я установил @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

Что я делаю не так?

Большое спасибо за вашу помощь:)

Ответы [ 2 ]

1 голос
/ 04 апреля 2019

Я ответил на вопросы так, как если бы вы использовали Semantic UI, тогда как вы спрашивали о Material UI, поэтому я оставлю первый ответ для всех, кто использует Semantic, и теперь отвечу за Material UI.

Самый простой подход дляЗначки предназначены для импорта библиотеки значков материалов в макет HTML 

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

, а затем просто используйте их в интерфейсе материалов следующим образом: 

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

Если вы импортируете всю библиотеку интерфейса материаловкак один объект (в соответствии с вашим вопросом), то это будет: 

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

Кроме того, я думаю, что @material-ui/icons' не включает в себя какие-либо методы, а только сами значки, так что вы можете простоимпортируйте его, а затем используйте значки (так как ресурсы будут упакованы Webpack)

1 голос
/ 04 апреля 2019

Я не вижу MenuIcon как класс в семантическом пользовательском интерфейсе, и использовал значки на кнопках следующим образом:

Итак, если вы импортировали материал UI, как этот 

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

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

Возможно, вам также придется импортировать вашу библиотеку значков (либо в NPM, либо просто путем включения CSS материалов в свой макет.

Я считаю лучший способ импортировать значки (и весь семантический CSS)это сборка с использованием Yarn, а затем импорт через Webpack, как это 

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