Material-ui:图标的大纲版本 [英] Material-ui: outline version of icon

问题描述

我在我的React Web应用程序中使用material-ui.我在组件中需要图标'action/description'，但在 outline 版本中.

根据文档:

为方便起见，全套Google材料图标可用 在Material-UI中作为预先构建的SVG图标组件.

所以我可以这样做以获得填充"版本:

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

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

但是我如何获得概述"版本?我尝试过使用CSS，但没有成功:

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

解决方案

不确定最初提出问题时是否可用，但来自官方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 beta程序包，该程序包可能在几个月前不可用.安装方式:

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

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

I'm using material-ui in my react web application. I need the icon 'action/description' in a component but in the outline version.

According to the docs:

For convenience, the full set of google Material icons are available in Material-UI as pre-built SVG Icon components.

So I can do this to get the "filled" version:

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

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

But how do I get the "outline" version? I tried playing with css but didn't succeed:

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

解决方案

Not sure if this was available when you posed the original question, but from the official v1.3.1 documentation:

For "themed" icons, append the theme name to the icon name. For instance with the

• The Outlined delete icon is exposed as @material-ui/icons/BuildOutlined
• The Rounded delete icon is exposed as @material-ui/icons/BuildRounded
• The Two Tone delete icon is exposed as @material-ui/icons/BuildTwoTone
• The Sharp delete icon is exposed as @material-ui/icons/BuildSharp

See https://material-ui.com/style/icons/

edit: confirmed that this requires the latest beta package of @material/icons which may not have been available a few months ago. Install with:

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

and you should be able to access the themed icon sets mentioned in the recent docs.

这篇关于Material-ui:图标的大纲版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！