For every Client-Side Web Part that we build using the SharePoint Framework we can specify the icon to make it easily distinguishable amongst other Web Parts visible in the toolbox.
When building Web Parts, providing them with an icon helps users find it amongst other Web Parts. Icons of Client-Side Web Parts are set in the Web Part manifest preconfiguredEntries section and there are two ways to set the Web Part icon.
One way to set an icon of a Client-Side Web Part is by using a custom image. Using the iconImageUrl property you should specify an absolute URL to an image of 38x38px:
{
"$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": "Default" },
"title": { "default": "Weather" },
"description": { "default": "Shows weather in the given location" },
"iconImageUrl": "https://contoso.com/weather.png",
"properties": {
"location": ""
}
}]
}
Another way to set the icon of a Client-Side Web Part is by specifying the name of the font icon using theofficeFabricIconFontName.
{
"$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": "Default" },
"title": { "default": "Weather" },
"description": { "default": "Shows weather in the given location" },
"officeFabricIconFontName": "Sunny",
"properties": {
"location": ""
}
}]
}
Despite its name, the officeFabricIconFontName property doesn’t support all icons listed at http://dev.office.com/fabric/styles. Here is the list of all icons that you can use with theofficeFabricIconFontName property.
And here is how they look like:
In case you want to have a closer look at how the icons look like I’ve built a sample Web Part that shows them. You can find the Web Part on GitHub at https://github.com/waldekmastykarz/spfx-iconfontnames-webpart.
The icon specified using the officeFabricIconFontName takes precedence over the image icon set using the iconImageUrl property. In case you specify both values, the icon from the officeFabricIconFontName property will be used.
Merken
