webentwicklung-frage-antwort-db.com.de

SVG-Icons mit Material-UI: Wo finde ich den Style?

Auf http://www.material-ui.com/#/components/app-bar heißt es, dass unter den möglichen Eigenschaften, die sie unterstützen, "iconElementLeft ... element ..." steht die linke Seite der App-Leiste, beispielsweise ein SvgIcon. "

Was ich jetzt habe, ist nicht so gestaltet wie der Rest der Dinge in der Menüleiste ... Ich zeige auf ein gefundenes svg-Symbol und verwende img-Attribute, um es zu passen mag es die einheimischen Dinge?

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

Wie kann ich alternativ alle Symbole im Material-UI-NPM-Paket durchsehen, um zu sehen, ob sie etwas Natives haben, das funktionieren könnte?

svgreactjsmaterial-designmaterial-ui
9
Mad Bernard

Zwei Wege...

  1. Integrieren Sie das SVG mit SvgIcon

    Mit der Komponente SvgIcon können Sie die erforderlichen Svg-Assets einschließen. 

  2. Importieren vorhandener Material-Ui-Assets .__ Importieren Sie sie einfach in eine Variable, um sie zu verwenden.

    importiere FileCloudDownload von 'material-ui/lib/svg-icons/file/cloud-download';

    ...

    iconElementLeft = {FileCloudDownload}

Sie finden auch Styling-Beispiele im obigen Link.

8
hazardous

Hier ist die Liste von allen; Unterstützte Vektor-Icons

https://www.materialui.co/icons

importiere sie so

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';

die Ordnerstruktur lautet 

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

Verwenden Sie die automatische Vervollständigung des VS-Codes, um das Symbol für Sie abzurufen/zu suchen 

Verwenden Sie dann Icons wie zB 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}
  />
0
Hitesh Sahu