• Accueil / Salesforce / Changer la couleur…
, Changer la couleur de l&rsquo;icône dans Lightning Web Component &#8211; Blog de Jitendra Zaa<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Changer la couleur de l’icône dans Lightning Web Component – Blog de Jitendra Zaa2 minutes de lecture


Pourquoi remplir la propriété css ne fonctionne pas pour l’icône LWC

Lightning Web Component fournit des centaines d’icônes standard pour choisissez dans cette liste. Et des composants Web Lightning comme icône de foudre ou bouton-icône peut être utilisé pour choisir ces icônes.

Si nous voulons changer la couleur d’arrière-plan de ces icônes, seules les couleurs que nous avons sont le vert, le jaune, le rouge ou le gris selon leur succès de variante, avertissement, erreur ou inverse.

Si jamais vous essayez de changer la couleur de ces icônes en utilisant la propriété fill, vous seriez déçu. Lightning Web Component a utilisé shadow DOM pour encapsuler les composants du monde extérieur, le même principe ici nous restreint à changer la couleur d’arrière-plan des icônes.

Essayez vous-même [Not Working]

C’est ce que j’ai essayé et qui n’a pas fonctionné


Fichier CSS

.redColor{
    fill : #FF0000;
}

Solution – Couleur d’arrière-plan personnalisée pour les icônes LWC

Étape 1 :

Faites un clic droit sur l’icône où vous voulez changer la couleur de fond et cliquez sur inspecter

, Changer la couleur de l&rsquo;icône dans Lightning Web Component &#8211; Blog de Jitendra Zaa<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>
Afficher le code source de l’icône LWC dans Chrome

Étape 2 :

Copiez la balise svg et collez-la dans votre éditeur et ajoutez css. N’oubliez pas d’ajouter la balise div en tant que parent pour contrôler la taille des icônes.

, Changer la couleur de l&rsquo;icône dans Lightning Web Component &#8211; Blog de Jitendra Zaa<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>
Copiez l’équivalent SVG de l’icône LWC dans le navigateur Chrome

et fichier CSS

.redColor{
    fill : #FF0000;
}
.iconContainer{
    width : 50px;
    height:50px;
    display:inline-block;
}

Essayez vous-même – URL du terrain de jeu fonctionnel

Conclusion :

Ce n’est peut-être pas exactement ce que vous recherchez, mais vous pouvez effectuer presque toutes les opérations icône de foudre ou bouton-icône pouvez faire, ajoutez simplement le gestionnaire d’événements onclick, les propriétés css, etc. et vous êtes prêt à partir.



Source de l’article traduit automatiquement en Français

Besoin d'aide ?
Voulez-vous utiliser Pardot à sa capacité maximale et avoir
+ DE LEADS QUALIFIÉS

Notre analyse de votre Pardot offerte dès aujourd'hui
Merci, vous pouvez compléter notre questionnaire
Nous allons revenir vers vous rapidement !

Fermer