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

Question

Я использую материал-интерфейс в своем веб-приложении. Мне нужен значок "действие / описание" в компоненте, но в набросках версии.

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

Для удобства полный набор значков 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>

Answer 1

Не уверен, что это было доступно, когда вы задали оригинальный вопрос, но из официальной документации 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/

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

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

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

Answer 2

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

Я скачал файл 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>

Answer 3

Чтобы добавить в 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}
/>