レビューページ専用のユニークなカスタムアイコン

[Don]

こんにちは。

CSSソリューションも作成しました。

デフォルトのチェックアイコンを非表示にし、::before疑似要素にカスタムアイコンを追加します。

1. 新しいテーマコンポーネントを作成します。

2. アイコンをアップロードセクションにアップロードし、SCSS変数名を追加します: review-approved-icon
   

   

3. 「CSS/HTMLを編集」ボタンをクリックし、共通 / 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;
    }
  }
}

---

ライトおよびダークカラー スキームで異なるアイコンを使用したい場合

このオプションを選択した場合、異なる色のアイコンを2つアップロードする必要があります。

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

---