Release badge image

As of the Cortina release and going forward, the Jutro themes include a release image in CSS. It's encoded as svg in two CSS variables, both containing the same image.

You can use the first one directly in CSS:

.releaseBadge {
  background-image: var(--GW-RELEASE-BADGE-URL);
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}

You can use the other one as a source of an img element:

export const ReleaseBadge = () => {
  const [badgeData, setBadgeData] = useState();

  useLayoutEffect(() => {
    const themeRoot = document.querySelector('.themeRoot');
    setBadgeData(
      getComputedStyle(themeRoot).getPropertyValue('--GW-RELEASE-BADGE-DATA')
    );
  }, [setBadgeData]);

  return (
    <img
      src={badgeData}
      width="50px"
      height="50px"
      alt="release badge"
    />
  );
};