使用 Material-UI : where to find, 的 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 包中的所有图标，看看它们是否有可能工作的 native 图标？

Answer 1

两种方式...

1. 使用 SvgIcon 内联 svg

   与 SvgIcon component ，您可以包含所需的 Svg 资源。

2. 导入现有的material-ui资源 只需导入到变量中即可使用它。

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

   ...

   iconElementLeft={FileCloudDownload}

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