Icône

Le composant Icon vous permet d’afficher des icônes dans vos composants dynamiques Avonni. Il prend en charge les icônes standard du Salesforce Lightning Design System (SLDS) et peut inclure des icônes personnalisées fournies par Avonni. Les icônes améliorent l’attrait visuel et l’utilisabilité de vos composants.

Aperçu

Le composant Icon est un élément visuel simple. Il est utilisé pour :

• Représenter visuellement des actions ou des états.

• Fournir des repères visuels pour la navigation.

• Ajouter de l’intérêt visuel.

• Améliorer l’accessibilité (avec un texte alternatif approprié).

---

Propriétés

Le composant Icon possède ces propriétés dans le panneau des propriétés :

• Nom API : Un identifiant unique pour le composant.

• Nom de l’icône : (Texte) Le nom de l’icône. Utilisez :

  • Icônes SLDS : Format : catégorie:nom (par ex., standard:account, utility:add). Trouvez les icônes disponibles dans la documentation du Salesforce Lightning Design System.

  • Icônes personnalisées Avonni : Consultez la documentation Avonni pour les noms.

  • Valeur dynamique : Vous pouvez utiliser une Variable, une Constante ou une Formule.

• Taille de l’icône : (Texte) La taille de l’icône. Les options incluent généralement :

  • x-small

  • petit

  • moyen

  • grand

  • très grand

• Variant : (Texte) Le style (couleur) de l’icône. Ne fonctionne qu’avec utility icônes. Les options comprennent souvent :

  • base

  • erreur

  • warning

  • success

  • inverse

• Titre : (Texte) Texte alternatif pour l’icône. Essentiel pour l’accessibilité ! Ce texte est :

  • Utilisé par les lecteurs d’écran.

  • Affiché comme info-bulle au survol (dans la plupart des navigateurs). Décrivez la finalité, pas seulement son apparence. Exemple : « Créer un nouveau compte », pas « Signe plus ».

• Visible : (Booléen) Contrôle la visibilité, prend en charge l’affichage et la masquage dynamiques.

---

: La valeur maximale.

Exemple 1 : Icône de compte statique

• Nom de l'icône : standard:account

• Taille de l’icône : medium

• Variant : base

• Titre : Icône de compte

Ceci affiche l’icône standard Compte de Salesforce.

Exemple 2 : Icône dynamique (Formule)

• Nom de l’icône : myStatusIcon (Ceci est une ressource Formule)

• Taille de l’icône : small

• Variant : inverse

• Titre : Statut de l’opportunité

La ressource Formule myStatusIcon pourrait contenir :

IF(OpportunityStageName = 'Closed Won', 'utility:check', IF(OpportunityStageName = 'Closed Lost', 'utility:close', 'utility:help' ) )

Ceci modifie l’icône en fonction du StageName d’une opportunité.

---

variable sera mise à jour, et vous pourrez utiliser ces valeurs pour filtrer un Data Table.

• Accessibilité : FOURNISSEZ TOUJOURS un titre significatif.

• Conformité SLDS : L’utilisation des icônes SLDS garantit une cohérence visuelle.

• Icônes dynamiques : Utilisez Variables/Formules pour changer les icônes en fonction des données.

• Disponibilité des icônes : Consultez la documentation pour connaître les noms d’icônes valides