Ícone personalizado exclusivo apenas para a página de revisão

[Don]

Olá,

Eu também escrevo uma solução CSS.

Isso ocultará o ícone de verificação padrão e adicionará o ícone personalizado a um pseudo ::before.

1. Crie um novo componente de tema.

2. Carregue o ícone na seção Uploads e adicione o nome da variável SCSS: review-approved-icon
   

   

3. Clique no botão Editar CSS/HTML e cole o seguinte código na seção Common / CSS.

Use isso se você quiser usar var(--success) para adicionar cor ao ícone personalizado

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) cor do esquema claro #090 (cor do ícone personalizado)
      // você pode calcular um novo filtro de cor clara aqui: 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) cor do esquema escuro #1ca551 (cor do ícone personalizado)
        // você pode calcular um novo filtro escuro aqui: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Use isso se o seu ícone tiver a cor que você deseja 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;
    }
  }
}

---

Use isso se você quiser usar um ícone diferente nos esquemas de cores claro e escuro

Se você escolher esta opção, terá que carregar dois ícones diferentes com cores diferentes.

Nome da variável SCSS: review-approved-icon-light e 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;
    }
  }
}

---