SVG-Symbole mit Material-UI: wo zu finden, wie man Stil?
Auf http://www.material-ui.com/#/components/app-bar es sagt, dass es unter den möglichen proprerties Sie unterstützen wird "iconElementLeft ... element ... Das custom-element angezeigt werden auf der linken Seite der app-Leiste wie eine SvgIcon."
Was ich jetzt nicht im Stil wie der rest der Dinge, die auf der Menüleiste... ich bin deutete auf ein svg-Symbol habe ich gefunden und mit der img-Attribute, um zu versuchen, es in passen. Wie konnte ich machen, Material-UI-Stil, wie die einheimischen die 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>
}/>
)
}
Alternativ, wie könnte ich durch all die icons in der Material-UI-NPM-Paket, um zu sehen, wenn Sie etwas native, die funktionieren könnte?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Zwei Möglichkeiten...
Inline-svg mit SvgIcon
Mit der SvgIcon Komponente, können Sie das erforderliche Svg-assets.
Importieren von vorhandenem material-ui assets
Importieren Sie einfach in eine variable zu verwenden.
import FileCloudDownload von 'material-ui/lib/svg-Symbole/- Datei/- cloud-download";
...
iconElementLeft={FileCloudDownload}
Werden Sie auch sehen, styling Beispiele in dem oben genannten link.
Hier ist die Liste aller; unterstützt Vektor-icons
importieren, wie dies
die Ordner-Struktur ist
Verwenden Sie die Autovervollständigung von VS code zu Holen/suchen Symbol für Sie
Dann verwenden Sie Symbole wie unten zB ModeBUS