Значки SVG с Material-UI: где найти, как стилизовать?

Question

В сообщении http://www.material-ui.com/#/components/app-bar говорится, что среди возможных свойств, которые они поддерживают, является элемент «iconElementLeft ...» ... Пользовательский элемент, который будет отображаться в левой части панели приложений, такой как 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> 
      }/> 
    ) 
} 

Кроме того, как я мог смотреть сквозь все иконки в пакете Материал-UI НПМ, чтобы увидеть, если у них есть что-то родное, что могло бы работать?

Answer 1

Два способа ...

1. , вставит с помощью SVG SvgIcon

   С SvgIcon component, вы можете включить необходимые активы SVG.

2. Импорт существующих материалов-ui-активов Просто импортируйте переменную, чтобы использовать его.

   import FileCloudDownload from 'material-ui/lib/svg-icons/file/cloud-download';

   ...

   iconElementLeft = {} FileCloudDownload

Вы также увидите примеры моделирования в приведенной выше ссылке.