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

Posted 2023-02-22

技术标签:

【中文标题】带有 Material-UI 的 SVG 图标：在哪里可以找到，如何设置样式？【英文标题】：SVG icons with Material-UI: where to find, how to style? 【发布时间】：2016-05-14 15:22:51 【问题描述】：

在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 包中的所有图标，看看它们是否有可能工作的本机图标？

【问题讨论】：

【参考方案1】：

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

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
  />

【讨论】：

【参考方案2】：

两种方式...

使用 SvgIcon 内联 svg

使用SvgIcon component，您可以包含所需的 Svg 资产。

导入现有 Material-ui 资产只需导入一个变量即可使用它。

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

...

iconElementLeft=FileCloudDownload

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

【讨论】：

谢谢！对于可能会发现此问题的其他人，请注意，material-ui SVG 图标组件页面当前链接到 design.google.com/icons，如果您没有看到灰白色搜索栏标题，则无法搜索到该页面。他们没有 CTRL-F... 是的，很容易错过。