Partager via


Conception d’une icône de composant WebPart SharePoint

Les icônes de composant WebPart sont conçues pour être simples, représentatives et symboliques. Chaque icône est réduite à un style minimaliste qui représente les attributs essentiels. Les icônes s’affichent dans la boîte à outils dans les pages SharePoint et si vous le souhaitez dans le magasin. Les formes d’icône sont carrées, circulaires, verticales et horizontales.

Exemples d’icône

Formes de grilles

Les icônes de composant WebPart sont affichées en 32 x 32 px mais sont été conçues au double de leur taille, ou à 64 x 64 px. Création des icônes à 100 % pour vous assurer que les pixels sont exacts.

Grille des icônes du composant WebPart

Disposition

Icônes conçues dans la zone de conteneur 64 x 64 px . Cela garantit que l’icône s’affiche correctement.

Exemple de grille pour les icônes de composant WebPart en 64px

Formes

Toutes les icônes ou logos ne sont conçues selon un carré parfait. Utilisez ce guide de formes de base pour comprendre comment unifier les différentes formes d’icônes de la grille et les afficher dans une taille proportionnelle. Assurez-vous que l’icône remplit la largeur complète ou la pleine hauteur de la grille, en fonction de sa forme.

Exemple d’alignement des icônes de différentes formes au sein de la grille

Clarté de pixel

Essayez d’éviter toute distorsion des icônes en alignant les bords aux coordonnées X et Y. Utilisez des nombres entiers dans la mesure du possible.

Exemple d’une icône qui n’est pas alignée au pixel et une qui y est

Couleurs et arrière-plans

L’icône est l’expression visuelle de votre composant WebPart et décrit sa fonction. Les icônes peuvent vous aider à communiquer le concept de base de votre composant WebPart de manière simple mais efficace.

Les icônes de composant WebPart peuvent contenir une couleur ou être entièrement colorées. La plupart des icônes fonctionnent mieux lorsque vous utilisez des formes simplifiées, des lignes fines à deux pixels semblables aux icônes de l’interface utilisateur d’Office Fabric. Dans certains cas, vous devrez peut-être utiliser une icône de marque de société ou un logo en couleurs. Si une version une couleur de l’icône est disponible, vous pouvez utiliser cette version.

Exemples une couleur, deux couleurs deux et entièrement coloré

L’exportation de vos icônes

Exporter des icônes en tant que SVGs à 64 x 64 px avec arrière-plans transparents.

Vous pouvez trouver la grille d’icônes dans le Kit de ressources création SharePoint.