Malzeme-UI ile SVG simgeleri: Nerede, nasıl stil için?

Question

http://www.material-ui.com/#/components/app-bar'da, destekledikleri olası sürümler arasında "iconElementLeft ... öğesi ... uygulama çubuğunun sol tarafında SvgIcon gibi görüntülenecek özel öğe" olduğunu söylüyor.

Şu anda sahip olduğum şey, menü çubuğundaki diğer şeyler gibi biçimlendirilmemiş ... Bulduğum ve sığmaya çalıştığım img özniteliklerini kullanan bir svg simgesine işaret ediyorum. Nasıl yapabilirim Malzeme-UI tarzı yerel şeyler gibi mi? Alternatif

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

, onlar bir şey yerli olup olmadığını görmek için Malzeme UI NPM paketindeki tüm simgeleri bakmak nasıl bu işe yarayabilir?

Answer 1

iki yolu ...

1. Inline SvgIcon component ile SvgIcon

   kullanarak svg

   , Gerekli SVG varlıkları içerebilir.

2. Varolan malzeme-ui varlıklarını içe aktarma Sadece kullanmak için bir değişkene içe aktarın.

   import FileCloudİndir 'material-ui/lib/svg-icons/file/cloud-download';

   ...

   iconElementLeft = {FileCloudDownload}

Ayrıca yukarıdaki linkte şekillendirme örneklerini göreceksiniz.