Alert Custom Icon

<div class="btn-container">
  <button id="success" type="button" class="btn">Show Success Alert</button>
  <button id="error" type="button" class="btn">Show Error Alert</button>
</div>

<template id="custom-icon-template">
  <!-- Add custom part attribute to be able to target this icon for styling -->
  <svg class="success" part="icon icon-success" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
4 collapsed lines
    <path
      d="m363-310 117-71 117 71-31-133 104-90-137-11-53-126-53 126-137 11 104 90-31 133ZM480-28 346-160H160v-186L28-480l132-134v-186h186l134-132 134 132h186v186l132 134-132 134v186H614L480-28Zm0-112 100-100h140v-140l100-100-100-100v-140H580L480-820 380-720H240v140L140-480l100 100v140h140l100 100Zm0-340Z"
    />
  </svg>

  <svg class="error" part="icon icon-error" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
4 collapsed lines
    <path
      d="m443-362 74-101 73 101 130-177-64-47-66 89-74-101-73 101-74-101-129 177 64 47 65-89 74 101Zm37 282q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
    />
  </svg>
</template>

<sv-alert-stack swipe-dismiss></sv-alert-stack>

<script>
  const alertStack = document.querySelector("sv-alert-stack");
  const showSuccessAlertButton = document.querySelector("#success");
  const showErrorAlertButton = document.querySelector("#error");
  const template = document.querySelector("#custom-icon-template");

  /** @param {import("@staticview/ui/alert-stack").Severity} severity */
  const customIcon = severity => {
    if (severity === "success") {
      const successIcon = template.content.cloneNode(true).querySelector(".success");
      return successIcon;
    }

    if (severity === "error") {
      const errorIcon = template.content.cloneNode(true).querySelector(".error");
      return errorIcon;
    }

    // Fallback to default icon
  };

  showSuccessAlertButton.addEventListener("click", () => {
    alertStack.create({
      severity: "success",
      title: "New update available",
      description: "A newer version of this application is ready to install.",
      iconOverride: customIcon,
    });
  });

8 collapsed lines
  showErrorAlertButton.addEventListener("click", () => {
    alertStack.create({
      severity: "error",
      title: "Action failed",
      description: "Something went wrong while saving. Please try again.",
      iconOverride: customIcon,
    });
  });
</script>

<style>
  sv-alert-stack::part(icon) {
5 collapsed lines
    inline-size: 2em;
    block-size: 2em;
    border-radius: 50%;
  }

  sv-alert-stack::part(icon-error) {
3 collapsed lines
    fill: var(--sv-error);
  }

  sv-alert-stack::part(icon-success) {
    fill: var(--sv-success);
26 collapsed lines
  }

  .btn-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  .btn {
    padding: 0.5em 1em;
    cursor: pointer;
    border: solid 1px gray;
    border-radius: 0.5em;

    &#success {
      color: var(--sb-tip-text);
      background-color: var(--sb-tip-background);
      border-color: var(--sb-tip-border);
    }

    &#error {
      color: var(--sb-caution-text);
      background-color: var(--sb-caution-background);
      border-color: var(--sb-caution-border);
    }
  }
</style>