Unique custom icon for review page only

[Joart]

Hello,
I would like to replace the check icons in the review page only. We can find it there :

<span class="approved">
        <svg class="fa d-icon d-icon-check svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#check"></use></svg>
        Approved
</span>

If I use this:
api.replaceIcon('check', 'full-circle-icon');
all the checks of the forum will be replaced by the full-circle…
But I don’t want to replace the icon in the other pages.

How can I modify do that? Thank you for your answer

[Canapin (Coin-coin le Canapin)]

Not 100% sure it would work because I haven’t tried it, but you can try to get the current page with javascript, check if it’s a review page, then change the icon with your line of code.

I believe there was a JS example somewhere on meta using the API to get the current page we’re on, but I couldn’t find it again.

Or maybe you can just return the current URL to check if you’re on /review.

[Joart]

I tried that:

    api.onPageChange((url) => {
       if (window.location.href.indexOf("review") > -1) {
             api.replaceIcon('check', 'full-circle-icon');
       }
    }

But it’s not working…
I have this error:

SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: Unexpected token, expected “,” (97:5)

Did I do something wrong?

[Canapin (Coin-coin le Canapin)]

You forgot ); at the end of your code, hence the error.

Something like this could work (don’t mind the URI parsing, there’s many ways to do it):

    api.onPageChange((url) => {
       if (location.pathname.split('/')[1] == "review") {
            api.replaceIcon('check', 'full-circle-icon');
       }
    });

But be aware that onPageChange doesn’t trigger on the first page load. If you open directly yourforum/reviews in your browser, then onPageChange won’t trigger and the icon won’t be replaced.

I don’t know how to trigger the icon change on both the first page load and on a page change though. Maybe there’s an API method for that, but I didn’t find it.

Plus, once the icon is changed, it will remain changed on other pages as you navigate, so you should revert the icon change if the URL isn’t /review.

In short… I think it requires a bit more work to be fully functional. Note that I’m not exactly an expert in Discourse code or javascript. Maybe someone with more knowledge will be able to help further.

---

edit: the code doesn’t work when you go to /review the first time, I suppose this is because the page is loaded and the icon isn’t dynamically changed. So, we should find another way to do that. Sorry that I can’t help more with this.

[Joart]

@Canapin

you should revert the icon

Do you know how to do that?

[Don]

Hello,

I write a css solution too.

It will hide the default check icon and add the custom icon to a ::before pseudo.

1. Create a new theme component.

2. Upload the icon to the Uploads section and add the SCSS var name: review-approved-icon
   

   

3. Click Edit CSS/HTML button and paste the following code to Common / CSS section.

Use this if you want to use var(--success) to add color to the custom icon

.reviewable {
  .status span.approved {
    position: relative;
    &:before {
      content: url($review-approved-icon);
      width: 13px;
      height: 13px;
      top: 0px;
      position: absolute;
      // var(--success) light scheme color #090 (custom icon color)
      // you can calculate new light color filter here: 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) dark scheme color #1ca551 (custom icon color)
        // you can calculate new dark color filter here: 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 this if your icon has color what you want to use

.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 this if you want to use different icon on light and dark color scheme

If you choose this then you have to upload two different icon with different colors.

SCSS var name: review-approved-icon-light and 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;
    }
  }
}

---