Icône

Aperçu

Le composant Avonni Icon améliore l'attrait visuel et l'expérience utilisateur de vos pages grâce à des icônes significatives. Les icônes sont des aides visuelles puissantes qui rendent le contenu plus attrayant et la navigation plus intuitive.

Paramètres

🎛️ Propriétés

Nom	Description	Utilisation
Nom de l'icône	Sélectionnez le nom de l'icône à afficher.	Choisissez une icône qui représente clairement et complète le contenu ou l'action qui y est associée.
Taille de l'icône	Définissez la taille de l'icône.	Choisissez une taille qui garantit que l'icône soit clairement visible et harmonieusement intégrée dans la mise en page.
Variante	Choisissez une variante de style prédéfinie pour l'icône.	Sélectionnez une variante qui s'aligne sur la signification contextuelle ou l'action de l'icône, en renforçant sa communication visuelle.
Titre	Définissez un titre pour l'icône.	Fournissez un titre qui donne aux utilisateurs un contexte ou des informations supplémentaires lorsqu'ils survolent l'icône.
Texte alternatif	Fournissez un texte alternatif pour l'icône.	Saisissez un texte descriptif qui transmet la signification ou l'action de l'icône, garantissant l'accessibilité et améliorant le référencement.
Alignement horizontal	Déterminez l'alignement horizontal de l'icône dans son conteneur.	Alignez l'icône pour vous assurer qu'elle est positionnée de manière optimale dans la mise en page du contenu, en maintenant l'équilibre visuel et le flux.

🎨 Style

Couleur d'arrière-plan	Définissez la couleur d'arrière-plan de l'icône.	Choisissez une couleur d'arrière-plan qui garantit que l'icône se distingue et soit visuellement distincte dans le design de la page.
Couleur du premier plan	Définissez la couleur de l'icône elle-même.	Choisissez une couleur qui garantit que l'icône soit clairement visible sur l'arrière-plan et complète le design global.
Utilitaire de couleur du premier plan	Appliquez des classes utilitaires pour modifier la couleur du premier plan de l'icône.	Utilisez des classes utilitaires CSS pour appliquer facilement des styles de couleur prédéfinis à l'icône, garantissant cohérence et facilité de personnalisation du design.
Rayon de la bordure	Définissez le rayon des coins de la bordure de l'icône.	Ajustez le rayon de la bordure pour créer des icônes aux coins arrondis, améliorant la présentation stylistique des icônes.