|
1 | 1 | ---
|
2 |
| -title: Configure extension icon |
3 |
| -ms.date: 11/20/2017 |
| 2 | +title: Configure extension icon in SharePoint Framework (SPFx) Extensions |
| 3 | +description: Options for configuring the icon for your commands in SharePoint Framework (SPFx) Extensions. |
| 4 | +ms.date: 01/11/2018 |
4 | 5 | ms.prod: sharepoint
|
5 | 6 | ---
|
6 | 7 |
|
7 | 8 | # Configure extension icon
|
8 | 9 |
|
9 |
| -Selecting an icon that illustrates the purpose of your custom command, makes it easier for users to find your command among other options visible in the toolbar or in the context menu. This article explains the different options available to you to configure the icon for your commands. |
10 |
| - |
11 |
| -## Extension types that support icons |
| 10 | +Selecting an icon that illustrates the purpose of your custom command in SharePoint Framework makes it easier for users to find your command among other options visible in the toolbar or in the context menu. Specifying an icon for a command is optional. If you don't specify an icon, only the command title is displayed in the command bar. |
12 | 11 |
|
13 | 12 | SharePoint Framework supports building the following types of extensions:
|
14 | 13 |
|
15 |
| -- Application customizer |
16 |
| -- Field customizer |
17 |
| -- Command set |
| 14 | +- Application Customizer |
| 15 | +- Field Customizer |
| 16 | +- Command Set |
| 17 | + |
| 18 | +The Command Set is the only type of SharePoint Framework Extension for which you can configure icons. |
| 19 | + |
| 20 | +When deploying Command Sets, you can choose whether their commands should be visible on: |
18 | 21 |
|
19 |
| -Command set is the only type of SharePoint Framework extension for which you can configure icons. |
| 22 | +- The command bar (`___location: ClientSideExtension.ListViewCommandSet.CommandBar`) |
20 | 23 |
|
21 |
| -## Defining Command set locations |
| 24 | +- The context menu (`___location: ClientSideExtension.ListViewCommandSet.ContextMenu`) |
22 | 25 |
|
23 |
| -When deploying command sets, you can choose whether their commands should be visible on the command bar (`___location: ClientSideExtension.ListViewCommandSet.CommandBar`), in the context menu (`___location: ClientSideExtension.ListViewCommandSet.ContextMenu`) or both (`___location: ClientSideExtension.ListViewCommandSet`). Icons defined for the different commands will be displayed only for commands displayed in the command bar. |
| 26 | +- Both (`___location: ClientSideExtension.ListViewCommandSet`) |
24 | 27 |
|
25 |
| -## Configuring command set icons |
| 28 | +Icons defined for the different commands are displayed only for commands displayed in the command bar. |
26 | 29 |
|
27 |
| -SharePoint Framework offers you two ways to define the icon for your extension. |
| 30 | +SharePoint Framework offers you two ways to define the icon for your extension: |
28 | 31 |
|
29 |
| -### Using an external icon image |
| 32 | +- Use an external icon image |
| 33 | +- Use a base64-encoded image |
| 34 | + |
| 35 | +## Use an external icon image |
30 | 36 |
|
31 | 37 | When building SharePoint Framework command sets, you can specify an icon for each command by providing an absolute URL pointing to the icon image in the extension manifest, in the **iconImageUrl** property.
|
32 | 38 |
|
@@ -58,17 +64,21 @@ When building SharePoint Framework command sets, you can specify an icon for eac
|
58 | 64 | }
|
59 | 65 | ```
|
60 | 66 |
|
61 |
| -The command icon displayed in the command bar is 16x16px. If your image is bigger, it will be sized proportionally to match these dimensions. |
| 67 | +<br/> |
| 68 | + |
| 69 | +The command icon displayed in the command bar is 16x16 px. If your image is bigger, it is sized proportionally to match these dimensions. |
62 | 70 |
|
63 | 71 | 
|
64 | 72 |
|
65 |
| -While using custom images gives you flexibility to choose an icon for your command, it requires you to deploy them along with your other extension assets. Additionally, your image might lose quality when displayed in higher DPI or specific accessibility settings. To avoid quality loss, you can use vector-based SVG images which are also supported by the SharePoint Framework. |
| 73 | +<br/> |
66 | 74 |
|
67 |
| -### Using a base64 encoded image |
| 75 | +While using custom images gives you flexibility to choose an icon for your command, it requires you to deploy them along with your other extension assets. Additionally, your image might lose quality when displayed in higher DPI or specific accessibility settings. To avoid quality loss, you can use vector-based SVG images, which are also supported by the SharePoint Framework. |
68 | 76 |
|
69 |
| -When using a custom image, rather than specifying an absolute URL to the image file hosted together with other extension assets, you can have your image base64 encoded and use the base64 string instead of the URL. |
| 77 | +## Use a base64-encoded image |
70 | 78 |
|
71 |
| -> There are a number of services available on the Internet that you can use to base64 encode your image, such as [https://www.base64-image.de](https://www.base64-image.de). |
| 79 | +When using a custom image, rather than specifying an absolute URL to the image file hosted together with other extension assets, you can have your image base64-encoded and use the base64 string instead of the URL. |
| 80 | + |
| 81 | +A number of services are available online that you can use to base64-encode your image, such as [Convert your images to Base64](https://www.base64-image.de). |
72 | 82 |
|
73 | 83 | After encoding the image, copy the base64 string and use it as the value for the **iconImageUrl** property in the web part manifest.
|
74 | 84 |
|
@@ -100,10 +110,12 @@ After encoding the image, copy the base64 string and use it as the value for the
|
100 | 110 | }
|
101 | 111 | ```
|
102 | 112 |
|
103 |
| - |
| 113 | +<br/> |
104 | 114 |
|
105 |
| -Base64 encoding works both for bitmap images such as PNG as well as vector SVG images. The big benefit of using base64 encoded images is, that you don't need to deploy the web part icon image separately. |
| 115 | +Base64 encoding works for both bitmap images, such as PNG, as well as vector SVG images. The big benefit of using base64-encoded images is that you don't need to deploy the web part icon image separately. |
| 116 | + |
| 117 | + |
106 | 118 |
|
107 |
| -## Additional considerations |
| 119 | +## See also |
108 | 120 |
|
109 |
| -Specifying an icon for a command is optional. If you don't specify an icon, then only the command title will be displayed in the command bar. |
| 121 | +- [Overview of SharePoint Framework Extensions](../overview-extensions.md) |
0 commit comments