리뷰 페이지에만 표시되는 고유 커스텀 아이콘

[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;
    }
  }
}

---