web-dev-qa-db-fra.com

Icônes SVG avec Material-UI: où trouver, comment styler?

Sur http://www.material-ui.com/#/components/app-bar il est indiqué que, parmi les propriétés possibles qu’il prend en charge, figure "iconElementLeft ... element ... L'élément personnalisé à afficher sur le côté gauche de la barre d’application, tel qu’un SvgIcon. "

Ce que j'ai maintenant ne correspond pas au reste des éléments de la barre de menus ... Je pointe une icône de svg que j'ai trouvée et utilise des attributs img pour essayer de l'adapter. Comment puis-je créer un style Material-UI? c'est comme les choses indigènes?

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

Sinon, comment pourrais-je parcourir toutes les icônes du package NPM Material-UI pour voir si elles ont un élément natif qui pourrait fonctionner?

svgreactjsmaterial-designmaterial-ui
9
Mad Bernard

Deux manières...

  1. En ligne le svg en utilisant SvgIcon

    Avec le composant SvgIcon , vous pouvez inclure les actifs Svg requis. 

  2. Importation d'actifs matériels-ui existants Il suffit d'importer une variable pour l'utiliser.

    importer FileCloudDownload depuis 'material-ui/lib/svg-icons/file/cloud-download';

    ...

    iconElementLeft = {FileCloudDownload}

Vous verrez également des exemples de style dans le lien ci-dessus.

8
hazardous

Voici la liste de tous; icônes vectorielles prises en charge

https://www.materialui.co/icons

les importer comme ça

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

la structure du dossier est 

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

Utiliser l'auto-complétion du code de VS pour récupérer/rechercher l'icône pour vous 

Ensuite, utilisez les icônes ci-dessous, par exemple 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