Icône
<gcds-icon>

Ce composant est en cours de développement.

• GitHub
• Figma

Créer une icône

Utilisez une icône pour mettre l’accent sur une action ou une idée.

Codage et accessibilité des icônes

Sélectionner une icône pertinente

Obtenez l’icône de votre choix en remplaçant l’attribut name par le nom de l’icône correspondant.

Remarque : Conformément à la pratique courante, on utilise l'anglais pour tous les éléments de code.

Choisir l’échelle de l’icône

• Modifiez la taille d’une icône en définissant l’attribut size à une taille de police spécifique, comme text-small | text |  h1 | h2 | h3 | h4 | h5 | h6.
• Faites correspondre la taille de l’icône au texte d’accompagnement en définissant l’attribut size à inherit.
• Fixez une hauteur/largeur minimale de 24 x 24 pixels pour une icône interactive sans texte. Si vous pouvez augmenter la taille, 44 x 44 pixels dépasse les normes d’accessibilité, mais est plus accessible.

Ajuster le positionnement

Ajoutez une marge à la gauche ou à la droite d’une icône en définissant l’attribut margin-left ou margin-right à l’aide d’une valeur d’espacement comme 0 | 25 | 50 | 75 | 100 | 125 | 150 | 175| 200 | 225| 250 | 300 | 350| 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800 | 850 | 900 | 950 | 1000 | 1050 | 1100 | 1150 | 1200 | 1250.

Définir le texte du libellé

• Utilisez la propriété "label" pour une icône sans texte d’accompagnement.
• Vous n’avez pas besoin d’utiliser la propriété "label" si une icône est décorative.

Obtenez votre code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

3. Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.