Configuration d’une icône d’extension
Sélectionner une icône qui illustre l’objectif de votre commande personnalisée dans SharePoint Framework (SPFx) aide les utilisateurs à trouver votre commande parmi d’autres options visibles dans la barre d’outils ou dans le menu contextuel. Spécifier une icône pour une commande est facultatif. Si vous ne spécifiez pas d’icône, seul le titre de la commande apparaît dans la barre de commandes.
SharePoint Framework prend en charge la création des types d’extensions suivants :
- Personnalisateur d’application
- Personnalisateur de champ
- Jeu de commandes
Le jeu de commandes est le seul type d’extension SharePoint Framework pour lequel vous pouvez configurer des icônes.
Lors du déploiement du jeu de commandes, vous pouvez choisir les commandes qui doivent être visibles sur :
Barre de commande :
"location": "ClientSideExtension.ListViewCommandSet.CommandBar"Élément de menu contextuel
"location": "ClientSideExtension.ListViewCommandSet.ContextMenu"Les deux :
"location": "ClientSideExtension.ListViewCommandSet"
Les icônes définies pour les différentes commandes apparaissent uniquement pour les commandes affichées dans la barre de commandes.
Le SharePoint Framework offre deux options pour définir l'icône de l'extension :
- Utilisation d’une image d’icône externe
- Utilisation d’une image encodée en Base64
Utilisation d’une image d’icône externe
Lorsque vous créez un jeu de commandes dans SharePoint Framework, vous pouvez spécifier une icône pour chaque commande en fournissant une URL absolue pointant sur l’image de l’icône dans le manifeste de l’extension. Ceci est fait dans la iconImageUrlpropriété.
{
"id": "6cdfbff6-714f-4c26-a60c-0b18afe60837",
"alias": "WeatherCommandSet",
"componentType": "Extension",
"extensionType": "ListViewCommandSet",
...
"items": {
"WEATHER": {
"title": { "default": "Weather" },
"iconImageUrl": "https://localhost:4321/temp/sun.png",
"type": "command"
}
}
}
L’icône de commande affichée dans la barre de commandes est au format 16 x 16 px. Si votre image est plus grande, elle est redimensionnée de façon proportionnelle pour correspondre à ces dimensions.
![]()
L’utilisation d’images personnalisées vous offre de la flexibilité dans le choix de l’icône pour votre commande, mais vous devez les déployer en plus des autres ressources de votre extension.
Votre image pourrait perdre en qualité lors de l’affichage dans une résolution plus élevée ou avec des paramètres d’accessibilité plus spécifiques. Pour éviter une telle perte de qualité, vous pouvez utiliser des images vectorielles SVG, également prises en charge par SharePoint Framework.
Utilisation d’une image encodée en Base64
Lors de l’utilisation d’une image personnalisée, plutôt que de spécifier une URL absolue vers le fichier image hébergé en plus des autres ressources de l’extension, vous pouvez coder votre image en Base64 et utiliser la chaîne en Base64 à la place de l’URL.
Un certain nombre de services disponibles en ligne vous permettent d’encoder votre image en Base64. Par exemple, vous pouvez utiliser le service de conversion d’images en Base64.
Après l’encodage de l’image, copiez la chaîne en Base64 et utilisez-la comme valeur pour la propriété iconImageUrl dans le manifeste de composant WebPart.
{
"id": "6cdfbff6-714f-4c26-a60c-0b18afe60837",
"alias": "WeatherCommandSet",
"componentType": "Extension",
"extensionType": "ListViewCommandSet",
...
"items": {
"WEATHER": {
"title": { "default": "Weather" },
"iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAB/hUlEQVR42u29ebwkWVUn/j03Ipe31PZqr+ruqu7q6pXuZlcRRgUVBRnUn0rpMAJuTDeLog4u48bMiDoMtCA0MjAwOqil4oI6qCO2oIiDTQ...",
"type": "command"
}
}
}
L’encodage en Base64 fonctionne à la fois pour les images bitmap, par exemple au format PNG, et pour les images vectorielles SVG. L'avantage d'utiliser des images codées en base64 est que vous n'avez pas besoin de déployer l'image de l'icône du composant Web en plus de l'extension SPFx.
![]()