Icono personalizado único solo para la página de revisión

[Don]

Hola,

También escribo una solución de CSS.

Ocultará el icono de marca de verificación predeterminado y agregará el icono personalizado a una pseudo ::before.

1. Crea un nuevo componente de tema.

2. Sube el icono a la sección Cargas y agrega el nombre de la variable SCSS: review-approved-icon
   

   

3. Haz clic en el botón Editar CSS/HTML y pega el siguiente código en la sección Común / CSS.

Úsalo si quieres usar var(--success) para agregar color al icono personalizado

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) color del esquema claro #090 (color del icono personalizado)
      // puedes calcular el nuevo filtro de color claro aquí: 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) {
        // var(--success) color del esquema oscuro #1ca551 (color del icono personalizado)
        // puedes calcular el nuevo filtro de color oscuro aquí: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Úsalo si tu icono tiene el color que quieres usar

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Úsalo si quieres usar un icono diferente en el esquema de color claro y oscuro

Si eliges esto, tendrás que subir dos iconos diferentes con colores diferentes.

Nombre de la variable SCSS: review-approved-icon-light y 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;
    }
  }
}

---