Widget Icône

Aperçu​

Le widget Icône est un composant visuel qui affiche des icônes vectorielles évolutives sur votre interface. Il prend en charge une grande variété de bibliothèques d'icônes et offre des options de style flexibles, notamment la personnalisation des couleurs, l'ajustement de la taille et les contrôles d'alignement.

Propriétés du Widget​

Configuration de Base​

Configuration de l'Icône​

Exemples d'Utilisation​

Affichage d'Icône de Base​

Indicateur de Statut​

Icône de Navigation​

Validation et Visibilité​

Validation par Écran​

Configurez la visibilité et la disponibilité sur différents écrans :

Conditions Avancées​

Utilisez des expressions JavaScript pour une visibilité dynamique :

Options de Style​

Classes Personnalisées​

• Ajoutez des classes CSS personnalisées via le champ Class
• Utilisez des classes dynamiques pour un style conditionnel basé sur les données

Design Responsive​

• Les icônes se mettent à l'échelle de manière appropriée sur différentes tailles d'écran
• Utilisez des unités relatives dans le CSS personnalisé pour une meilleure réactivité

Schémas de Couleurs​

• Prise en charge des schémas de couleurs basés sur des thèmes
• Peut être intégré avec des variables de couleur globales

Bonnes Pratiques​

Performance​

1. Sélection d'Icônes : Choisissez des tailles d'icônes appropriées pour maintenir les performances
2. Utilisation des Couleurs : Utilisez des variables CSS pour une thématisation cohérente
3. Mise en Cache : Les polices d'icônes sont mises en cache par les navigateurs pour de meilleures performances

Accessibilité​

1. Texte Alternatif : Bien que les icônes n'aient pas de texte alternatif, assurez-vous que le contexte environnant est clair
2. Contraste de Couleur : Maintenez des rapports de contraste suffisants pour la visibilité
3. Directives de Taille : Utilisez un minimum de 16px pour les icônes interactives importantes

Cohérence du Design​

1. Famille d'Icônes : Utilisez des icônes de la même bibliothèque pour la cohérence
2. Standards de Taille : Établissez des directives de taille (par exemple, 16px, 20px, 24px)
3. Palette de Couleurs : Limitez les variations de couleur pour maintenir la hiérarchie visuelle

Considérations Responsive​

1. Évolutivité : Testez les icônes à différentes tailles et résolutions
2. Cibles Tactiles : Assurez un espacement adéquat pour les interfaces mobiles
3. États de Chargement : Envisagez des états de placeholder ou de chargement pour les icônes dynamiques

Dépannage​

Problèmes Courants​

1. L'Icône ne s'Affiche Pas :

   • Vérifiez que le nom de classe de l'icône est correct
   • Vérifiez si la bibliothèque d'icônes est chargée
   • Assurez-vous que les fichiers de police d'icônes sont accessibles

2. La Taille ne s'Applique Pas :

   • Vérifiez les conflits CSS
   • Vérifiez l'héritage de la propriété font-size
   • Utilisez les outils de développement du navigateur pour inspecter les styles

3. La Couleur ne Change Pas :

   • Assurez-vous que la propriété de couleur est correctement formatée
   • Vérifiez les problèmes de spécificité CSS
   • Vérifiez que la valeur de couleur est valide

4. Problèmes d'Alignement :

   • Examinez les styles du conteneur
   • Vérifiez les règles CSS conflictuelles
   • Assurez-vous de l'héritage approprié de text-align

Conseils de Débogage​

• Utilisez les outils de développement du navigateur pour inspecter les éléments d'icône
• Vérifiez l'application des classes CSS
• Vérifiez la console pour toute erreur de chargement de police
• Testez d'abord avec des classes d'icônes simples et connues pour fonctionner