Уникальная пользовательская иконка только для страницы отзывов

[Don]

Привет,

Я также подготовил решение на CSS.

Оно скроет стандартную галочку и добавит пользовательскую иконку через псевдоэлемент ::before.

1. Создайте новый компонент темы.

2. Загрузите иконку в раздел Загрузки и укажите имя переменной SCSS: review-approved-icon
   

   

3. Нажмите кнопку Редактировать CSS/HTML и вставьте следующий код в раздел Common / CSS.

Используйте это, если хотите использовать var(--success) для добавления цвета к пользовательской иконке

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) цвет для светлой темы #090 (цвет пользовательской иконки)
      // вы можете рассчитать новый фильтр цвета для светлой темы здесь: 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) цвет для темной темы #1ca551 (цвет пользовательской иконки)
        // вы можете рассчитать новый фильтр цвета для темной темы здесь: https://codepen.io/sosuke/pen/Pjoqqp
        filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
      }
    }
    .d-icon {
      visibility: hidden;
    }
  }
}

---

Используйте это, если ваша иконка уже имеет нужный вам цвет

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

---

Используйте это, если хотите использовать разные иконки для светлой и темной темы

Если вы выберете этот вариант, вам нужно загрузить две разные иконки с разными цветами.

Имена переменных SCSS: review-approved-icon-light и 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;
    }
  }
}

---