Material-UI 的 SVG 图标：在哪里可以找到，如何设置样式？

Question

在 http://www.material-ui.com/#/components/app-bar 上它说他们支持的可能属性是 "iconElementLeft ... element ... The custom element to be displayed on the left side of the app bar such as an SvgIcon."

我现在所拥有的样式与菜单栏上其他内容的样式不同...我指着我找到的一个 svg 图标并使用 img 属性尝试适应它。我怎么能使 Material-UI 风格像本地人一样？

export default (props)=>{
return (
    <AppBar
        title={<span style={styles.title}><Link to="/" className="logoLink">GIGG.TV</Link></span>}
        className="header"
        iconElementLeft={<img src='../../public/img/rocket.svg' height='40' width='40' alt='' />}
        // showMenuIconButton={false}
        iconElementRight={
            <IconMenu
              iconButtonElement={
                <IconButton><MoreVertIcon /></IconButton>
              }
              targetOrigin={{horizontal: 'right', vertical: 'top'}}
              anchorOrigin={{horizontal: 'right', vertical: 'top'}}
            >
              <MenuItem
                linkButton={true}
                primaryText="Home"
                containerElement={<Link to="/" className="logoLink">GIGG.tv</Link>} />

              <MenuItem primaryText="Sign in" containerElement={ <SignInModal/>} />
              <MenuItem
                linkButton={true}
                primaryText="Login as Artist"
                containerElement={<Link to="/artistSignIn" >Sign in/Up </Link>} />
            </IconMenu>
          }/>
    )
}

或者，我如何查看 Material-UI NPM 包中的所有图标，看看它们是否有一些可能有用的本地图标？

Answer 1

两种方式...

使用 SvgIcon 内联 svg

使用 SvgIcon component，您可以包含 required Svg 资源。
正在导入现有的 material-ui 资产只需导入一个变量即可使用它。

从 'material-ui/lib/svg-icons/file/cloud-download' 导入 FileCloudDownload；

...

iconElementLeft={FileCloudDownload}

您还将在上面的 link 中看到样式示例。

Answer 2

这是所有的列表；支持的矢量图标

https://www.materialui.co/icons

像这样导入它们

import ModeTrain from 'material-ui/svg-icons/maps/train';
import ActionInfo from 'material-ui/svg-icons/action/info';
import ModeBUS from 'material-ui/svg-icons/maps/directions-bus';

文件夹结构是

material-ui/svg-icons -->category-->iconName

使用 VS 代码自动完成 fetch/search 图标

然后使用如下图标，例如 ModeBUS

<ListItem
    leftAvatar={<Avatar icon={<ModeBUS />} />}
    rightIcon={<ActionInfo />}
    primaryText="Recipes"
    secondaryText={

      <p>
        <span >
          From: Station
            <br />
        </span>

        <span>
          To: Station
            <br />
        </span>
      </p>
    }
    secondaryTextLines={8}
  />

Material-UI 的 SVG 图标：在哪里可以找到，如何设置样式？

SVG icons with Material-UI: where to find, how to style?

svg

reactjs

material-design

material-ui