webentwicklung-frage-antwort-db.com.de

Material-ui: Umrissversion des Symbols

Ich verwende Material-Ui in meiner Web-Anwendung rea. Ich brauche das Symbol 'Aktion/Beschreibung' in einer Komponente, aber in der Gliederung Version. 

Laut den Unterlagen:

Zur Vereinfachung steht der gesamte Satz von Google Material-Symbolen zur Verfügung in Material-UI als vorgefertigte SVG-Icon-Komponenten.

So kann ich die "gefüllte" Version bekommen:

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

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

Aber wie bekomme ich die "Gliederung" -Version? Ich habe versucht mit css zu spielen, aber es gelang mir nicht:

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

Nicht sicher, ob dies verfügbar war, als Sie die ursprüngliche Frage gestellt haben, aber aus der offiziellen v1.3.1-Dokumentation:

Hängen Sie bei Themensymbolen den Namen des Themas an den Symbolnamen an. Zum Beispiel mit der

  • Das umrandete Löschsymbol wird als @ material-ui/icons/BuildOutlined verfügbar gemacht
  • Das Symbol für das abgerundete Löschen wird als @ material-ui/icons/BuildRounded angezeigt
  • Das Zwei-Ton-Löschsymbol wird als @ material-ui/icons/BuildTwoTone angezeigt
  • Das Sharp-Löschsymbol wird als @ material-ui/icons/BuildSharp angezeigt

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

edit: Es wurde bestätigt, dass hierfür das neueste Beta-Paket von @material/icons erforderlich ist, das vor einigen Monaten noch nicht verfügbar war. Installiere mit:

npm install @material-ui/[email protected]

und Sie sollten in der Lage sein, auf die thematischen Symbolsätze zuzugreifen, die in den letzten Dokumenten erwähnt wurden.

3
Joey T

Die eingebauten Icons haben einen ausgefüllten Stil, daher denke ich, dass Sie das skizzierte manuell erstellen müssen.

Ich habe die SVG-Datei hier heruntergeladen: Material Icons offizielle Seite .

Dann können Sie ein benutzerdefiniertes SVG-Symbol wie folgt hinzufügen: (Dies ist das umrissene Beschreibungssymbol)

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

Hinzufügen zu Marson Mao: Hier ist die Anleitung für benutzerdefinierte SVG-Symbole . Außerdem benötigt SvgIcon nur den Pfad path . 

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