带有Material-UI的SVG图标:在哪里可以找到,如何设计样式？

Question

在http://www.material-ui.com/#/components/app-bar上,它说他们支持的可能属性是"iconElementLeft ... element ...要显示在左侧的自定义元素应用程序栏,如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

两种方式......

1. 使用SvgIcon内联svg

   使用SvgIcon组件,您可以包含所需的Svg资产.

2. 导入现有材料-ui资产只需导入变量即可使用它.

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

   ...

   iconElementLeft = {FileCloudDownload}

您还将在上面的链接中看到样式示例.