Für jedes client-seitige Webpart, das wir mit dem SharePoint Framework erstellen, können wir ein Symbol definieren, um es leicht von den anderen in der Toolbox sichtbaren Webparts unterscheiden zu können.
Festlegen eines Symbols für ein SharePoint Framework Client-Side Web Part
Bei der Erstellung von Webparts hilft es den Benutzern, diese unter anderen Webparts zu finden, wenn sie mit einem Symbol versehen werden. Icons von Client-Side Webparts werden im Webpart-Manifest im Abschnitt preconfiguredEntries festgelegt und es gibt zwei Möglichkeiten, das Webpart-Icon festzulegen.
Festlegen des Client-seitigen Webpart-Symbols mithilfe eines Bildes
Eine Möglichkeit, das Symbol eines clientseitigen Webparts festzulegen, ist die Verwendung eines benutzerdefinierten Bildes. Mit der Eigenschaft iconImageUrl sollten Sie eine absolute URL zu einem Bild von 38x38px angeben:
{ "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json", "id": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b", "componentType": "WebPart", "version": "0.0.1", "manifestVersion": 2, "preconfiguredEntries": [{ "groupId": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b", "group": { "default": "Standard" }, "title": { "default": "Wetter" }, "description": { "default": "Zeigt das Wetter an dem angegebenen Ort" }, "iconImageUrl": "https://contoso.com/weather.png", "properties": { "location": "" } }] }
Festlegen des Client-seitigen Webpart-Symbols mithilfe eines Schriftartsymbols
Eine weitere Möglichkeit, das Symbol eines Client-seitigen Webparts festzulegen, besteht darin, den Namen des Schriftartensymbols mit theofficeFabricIconFontName anzugeben.
{ "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json", "id": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b", "componentType": "WebPart", "version": "0.0.1", "manifestVersion": 2, "preconfiguredEntries": [{ "groupId": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b", "group": { "default": "Standard" }, "title": { "default": "Wetter" }, "description": { "default": "Zeigt das Wetter an dem angegebenen Ort" }, "officeFabricIconFontName": "Sunny", "properties": { "location": "" } }] }
Trotz ihres Namens unterstützt die Eigenschaft officeFabricIconFontName nicht alle Symbole, die unter http://dev.office.com/fabric/styles aufgeführt sind. Hier ist die Liste aller Symbole, die Sie mit der Eigenschaft officeFabricIconFontName verwenden können.
- Hinzufügen
- HinzufügenGruppe
- AlignCenter
- AlignLeft
- AlignRight
- Anhängen
- Zurück
- ZurückZumFenster
- BlowingSnow
- Fettgedruckt
- Aufzählungsliste
- Kalender
- Kamera
- Abbrechen
- Diagramm
- AbhakenMarkieren
- ChevronLinks
- ChevronRight
- KreisPlus
- Klar
- KlarFormatierung
- KlarNacht
- WolkenWetter
- Bewölkt
- Abgeschlossen
- AbgeschlossenFest
- Löschen
- DocLibrary
- Staubsturm
- Bearbeiten
- BearbeitenGespiegelt
- Einbetten
- Emoji2
- ExcelLogo
- FacebookLogo
- Lieblingsstern
- FavoritensternFüllen
- Filtern
- Finanzen
- Nebel
- Ordner
- OrdnerÖffnen
- Schriftart
- SchriftStilSerif
- Weiterleiten
- Einfrieren
- Frigid
- Vollbild
- Globus
- Gruppe
- HagelTag
- HagelNacht
- Kopfzeile
- Kursiv
- Link
- Nachricht
- MobileSelected
- Mehr
- MultiAuswahl
- Nav2DMapView
- Nachrichten
- NummerierteListe
- OfficeVideoLogo
- OneNoteLogo
- OpenFile
- ÖffnenMit
- Org
- Seite
- SeiteHinzufügen
- TeilweiseWolkigTag
- TeilweiseWolkigeNacht
- Foto2
- Photo2Hinzufügen
- Foto2Entfernen
- FotoSammlung
- Bild
- Abspielen
- PowerApps
- PowerBILogo
- PowerPointLogo
- Niederschlag
- Vorschau
- Regen
- RegenSchauerTag
- RegenSchauerNacht
- RegenSchnee
- Neueste
- Aktualisieren
- Entfernen
- EntfernenLink
- Erneut teilen
- Farbband
- RechtsDoppelzitat
- Speichern
- Suchen
- Einstellungen
- Freigeben
- SharepointLogo
- SIPMove
- Schnee
- SchneeSchauerTag
- SchneeSchauerNacht
- Sturmböen
- StackIndicator
- Sonnig
- SwayLogo
- Übersetzt von
- System
- Tablette
- TabletAusgewählt
- Teamarbeit
- Gewitterstürme
- Kacheln
- TVMonitorAusgewählt
- TwitterLogo
- Unterstreichen
- Unbeliebt
- Video
- Ansicht
- VisioLogo
- Webcam
- WordLogo
- Weltzeituhr
- YammerLogo
- Vergrößern
- Vergrößern
- VergrößernAusblenden
Und so sehen sie aus:
Für den Fall, dass Sie einen genaueren Blick auf die Icons werfen möchten, habe ich ein Beispiel-Webpart erstellt, das sie anzeigt. Sie finden das Webpart auf GitHub unter https://github.com/waldekmastykarz/spfx-iconfontnames-webpart.
Ein Symbol für alle Fälle
Das mit officeFabricIconFontName angegebene Symbol hat Vorrang vor dem Bildsymbol, das mit der Eigenschaft iconImageUrl festgelegt wurde. Falls Sie beide Werte angeben, wird das Symbol aus der Eigenschaft officeFabricIconFontName verwendet.
Merken
