web-dev-qa-db-fra.com

Material-ui: version de contour de l'icône

J'utilise material-ui dans mon application web react. J'ai besoin de l'icône 'action/description' dans un composant mais dans le outline version. 

Selon les docs:

Pour plus de commodité, le jeu complet d’icônes Google Matériau est disponible dans Material-UI en tant que composants Icon SVG prédéfinis.

Donc, je peux le faire pour obtenir la version "remplie":

import ActionDescription from 'material-ui/svg-icons/action/description'

<div className="number">
  <ActionDescription />
</div>

Mais comment puis-je obtenir la version "contour"? J'ai essayé de jouer avec css mais je n'ai pas réussi:

<div>
  <ActionDescription style={{black: "black"}} color="transparent" />
</div>
reactjsmaterial-ui
6
olefrank

Vous ne savez pas si cela était disponible lorsque vous avez posé la question initiale, mais d'après la documentation officielle de la version 1.3.1:

Pour les icônes "à thème", ajoutez le nom du thème au nom de l'icône. Par exemple avec le

  • L’icône Supprimer supprimée est exposée sous la forme @ material-ui/icons/BuildOutlined
  • L'icône de suppression arrondie est exposée en tant que @ material-ui/icons/BuildRounded
  • L'icône de suppression à deux tons est exposée en tant que @ material-ui/icons/BuildTwoTone
  • L'icône de suppression Sharp est exposée sous la forme @ material-ui/icons/BuildSharp

Voir https://material-ui.com/style/icons/

edit: a confirmé que cela nécessite le dernier paquetage bêta de @material/icons qui n’était peut-être pas disponible il ya quelques mois. Installer avec:

npm install @material-ui/[email protected]

et vous devriez pouvoir accéder aux jeux d’icônes thématiques mentionnés dans la récente documentation.

3
Joey T

Les icônes intégrées sont remplies, alors je pense que vous devez créer manuellement l’icône décrite.

J'ai téléchargé le fichier svg ici: material icons site officiel .

Ensuite, vous pouvez ajouter une icône svg personnalisée comme ceci: (c'est l'icône de description décrite)

import SvgIcon from 'material-ui/SvgIcon';

    <SvgIcon>
      <g>
        <rect x="8" y="16" width="8" height="2"/>
        <rect x="8" y="12" width="8" height="2"/>
        <path d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M18,20L6,20V4h7v5h5V20z"/>
      </g>
    </SvgIcon>
1
Marson Mao

Pour ajouter à Marson Mao: Voici le guide pour Icônes SVG personnalisées . De plus, SvgIcon a uniquement besoin de chemin . 

const ActionDescriptionOutline = (props) => (
  <SvgIcon {...props}>
    <path d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M18,20L6,20V4h7v5h5V20z"/>
  </SvgIcon>
);

<RaisedButton
  icon={<ActionDescriptionOutline />}
  onClick={this.handleToggle}
/>
0
Ben Richter