Question

我在反应网络应用程序中使用了material-ui。我需要图标＆＃39;操作/说明＆＃39;在组件中，但在大纲版本中。

根据文件：

为方便起见，我们提供了完整的Google素材图标集在Material-UI中作为预构建的SVG Icon组件。

所以我可以这样做以获得＆＃34;填充＆＃34;版本：

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

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

但是我如何得到＆＃34;大纲＆＃34;版？我尝试过用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

夏普删除图标显示为@ material-ui / icons / BuildSharp

请参见https://material-ui.com/style/icons/

edit：确认这要求使用@material/icons的最新测试版程序包，该程序包可能在几个月前不可用。安装方式：

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

，您应该可以访问最新文档中提到的主题图标集。

Answer 2

内置图标采用填充样式，因此我认为您必须手动制作概述图标。

我在这里下载了svg文件：material icons official site。

然后你可以像这样添加自定义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：这是custom SVG Icons的指南。此外，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}
/>

Material-ui：图标的轮廓版本

3 个答案: