Icone SVG con materiale-UI: dove trovare, come stile?

Question

Su http://www.material-ui.com/#/components/app-bar si dice che tra le possibili proprietà che supportano è "iconElementLeft ... element ... L'elemento personalizzato da visualizzare sul lato sinistro della barra dell'applicazione, ad esempio SvgIcon."

Quello che ho ora non è in stile come il resto delle cose sulla barra dei menu ... Sto puntando a un'icona svg che ho trovato e utilizzando gli attributi di img per cercare di adattarlo. Come potrei fare Stile materiale-UI come le cose native?

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

In alternativa, come potrei guardare attraverso tutte le icone nel pacchetto Materiale-UI NPM per vedere se hanno qualcosa nativa che potrebbe funzionare?

Answer 1

due modi ...

1. Inline SVG usando SvgIcon

   Con il SvgIcon component, è possibile includere i beni Svg richiesti.

2. Importazione di risorse esistenti-risorse ui Basta importare in una variabile per usarlo.

   import FileCloudDownload da 'materiale-ui/lib/svg-icons/file/cloud-download';

   ...

   iconElementLeft = {} FileCloudDownload

Si vedrà anche esempi di stile nel link qui sopra.