Question

在http://www.material-ui.com/#/components/app-bar上，它表示他们支持的可能属性是“iconElementLeft ... element ...要在应用栏左侧显示的自定义元素，例如SvgIcon。”

我现在所拥有的内容并不像菜单栏上的其他内容那样...我指向我发现的svg图标，并使用img属性来尝试使用它。我怎样才能制作材质-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，您可以包含所需的Svg资产。
导入现有材料-ui资产只需导入变量即可使用它。

从＆＃39; material-ui / lib / svg-icons / file / cloud-download＆＃39;;
导入FileCloudDownload
...

iconElementLeft = {FileCloudDownload}

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

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代码为您提取/搜索图标

然后使用如下图标，例如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图标：在哪里可以找到，如何设计样式？

2 个答案: