Material-ui:图标的轮廓版本

Question

我在反应式Web应用程序中使用了material-ui.我需要组件中的"动作/描述"图标,但在大纲版本中.

根据文件:

为方便起见,Material-UI中提供了完整的Google Material图标集作为预构建的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/

编辑：确认这需要最新的beta软件包，@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>