Bonjour,
J’écris aussi une solution CSS. 
Elle masquera l’icône de coche par défaut et ajoutera l’icône personnalisée à un pseudo ::before.
-
Créez un nouveau composant de thème.
-
Téléchargez l’icône dans la section Uploads et ajoutez le nom de la variable SCSS :
review-approved-icon
-
Cliquez sur le bouton Modifier CSS/HTML et collez le code suivant dans la section Common / CSS.
Utilisez ceci si vous voulez utiliser var(--success) pour ajouter de la couleur à l'icône personnalisée
.reviewable {
.status span.approved {
position: relative;
&:before {
content: url($review-approved-icon);
width: 13px;
height: 13px;
top: 0px;
position: absolute;
// Couleur du schéma clair var(--success) #090 (couleur de l'icône personnalisée)
// vous pouvez calculer le nouveau filtre de couleur claire ici : https://codepen.io/sosuke/pen/Pjoqqp
filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
@media (prefers-color-scheme: dark) {
// Couleur du schéma sombre var(--success) #1ca551 (couleur de l'icône personnalisée)
// vous pouvez calculer le nouveau filtre de couleur sombre ici : https://codepen.io/sosuke/pen/Pjoqqp
filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
}
}
.d-icon {
visibility: hidden;
}
}
}
Utilisez ceci si votre icône a la couleur que vous souhaitez utiliser
.reviewable {
.status span.approved {
position: relative;
&:before {
content: url($review-approved-icon);
width: 13px;
height: 13px;
top: 0px;
position: absolute;
}
.d-icon {
visibility: hidden;
}
}
}
Utilisez ceci si vous voulez utiliser une icône différente pour les schémas de couleurs claires et sombres
Si vous choisissez cela, vous devrez télécharger deux icônes différentes avec des couleurs différentes.
Nom de la variable SCSS : review-approved-icon-light et review-approved-icon-dark
.reviewable {
.status span.approved {
position: relative;
&:before {
content: url($review-approved-icon-light);
@media (prefers-color-scheme: dark) {
content: url($review-approved-icon-dark);
}
width: 13px;
height: 13px;
top: 0px;
position: absolute;
}
.d-icon {
visibility: hidden;
}
}
}
