Material-ui: контурная версия иконки - PullRequest
Новая
       2

Material-ui: контурная версия иконки

0 голосов
/ 14 мая 2018

Я использую Material-UI в своем веб-приложении реагирования. Мне нужен значок «действие / описание» в компоненте, но в версии outline .

Согласно документам:

Для удобства доступен полный набор значков Google Material. в Material-UI как готовые компоненты SVG Icon.

Так что я могу сделать это, чтобы получить «заполненную» версию: 

import ActionDescription from 'material-ui/svg-icons/action/description'

<div className="number">
  <ActionDescription />
</div>

Но как мне получить "контурную" версию? Я пытался играть с css, но безуспешно: 

<div>
  <ActionDescription style={{black: "black"}} color="transparent" />
</div>

Ответы [ 3 ]

0 голосов
/ 31 мая 2018

Чтобы добавить в Marson Mao: Вот руководство для пользовательских значков SVG .Кроме того, SvgIcon нужен только путь .Рабочий пример: 

const ActionDescriptionOutline = (props) => (
  <SvgIcon {...props}>
    <path d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M18,20L6,20V4h7v5h5V20z"/>
  </SvgIcon>
);

<RaisedButton
  icon={<ActionDescriptionOutline />}
  onClick={this.handleToggle}
/>
0 голосов
/ 05 июля 2018

Не уверен, что это было доступно, когда вы задали исходный вопрос, но из официальной документации v1.3.1:

Для «тематических» значков добавьте название темы к имени значка.Например, с

  • Значок «Изложенное удаление» отображается как @ material-ui / icons / BuildOutlined
  • Значок «Закругленное удаление» отображается как @ material-ui / icons / BuildRounded
  • Значок удаления двух тонов отображается как @ material-ui / icons / BuildTwoTone
  • Значок удаления Sharp отображается как @ material-ui / icons / BuildSharp

См. https://material -ui.com / style / icons /

edit: подтверждено, что для этого требуется последняя бета-версия @material/icons, которая может быть недоступнанесколько месяцев назад.Установите с: 

npm install @material-ui/icons@2.0.0-beta.1

, и вы сможете получить доступ к тематическим наборам значков, упомянутым в последних документах.

0 голосов
/ 14 мая 2018

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

Я скачал файл svg здесь: материал иконок официальный сайт .

Затем вы можете добавить пользовательский значок SVG, например так: (это значок с описанием в общих чертах) 

import SvgIcon from 'material-ui/SvgIcon';

    <SvgIcon>
      <g>
        <rect x="8" y="16" width="8" height="2"/>
        <rect x="8" y="12" width="8" height="2"/>
        <path d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M18,20L6,20V4h7v5h5V20z"/>
      </g>
    </SvgIcon>
...