Custom icons are not updating after promise is resolved

[BayBreezy]

Hello,

After updating to version 2, I noticed that the icons being displayed after a promise is resolved is not updating.
I am using custom icons with this package inside a Nuxt 3 application.

This is what my component looks like:

<template>
  <div>
    <Notivue v-slot="item">
      <NotivueSwipe :item="item">
        <Notification :icons="icons" :theme="light" :item="item">
          <NotificationProgress :item="item" />
        </Notification>
      </NotivueSwipe>
    </Notivue>
  </div>
</template>

<script lang="ts" setup>
  import { Icon } from "#components";
  import { lightTheme } from "notivue";
  import type { NotificationType, NotivueTheme } from "notivue";

  const light: NotivueTheme = {
    ...lightTheme,
    "--nv-global-bg": "hsl(var(--background))",
    "--nv-border-width": "1px",
    "--nv-global-border": "hsl(var(--border))",
    "--nv-global-fg": "hsl(var(--foreground))",
    "--nv-radius": "7px",
    "--nv-width": "380px",
    "--nv-min-width": "380px",
    "--nv-y-align": "start",
    "--nv-promise-accent": "hsl(var(--muted-foreground))",
    "--nv-error-accent": "hsl(var(--destructive))",
  };

  const icons: Record<NotificationType | "close", any> = {
    close: markRaw(h(Icon, { name: "lucide-x" })),
    success: markRaw(h(Icon, { name: "lucide-check-circle-2" })),
    error: markRaw(h(Icon, { name: "lucide-x-circle" })),
    info: markRaw(h(Icon, { name: "lucide-info" })),
    warning: markRaw(h(Icon, { name: "lucide-alert-triangle" })),
    promise: markRaw(h(Icon, { name: "svg-spinners:clock" })),
    "promise-resolve": markRaw(h(Icon, { name: "lucide-check-circle-2" })),
    "promise-reject": markRaw(h(Icon, { name: "lucide-x-circle" })),
  };
</script>

<style>
  .Notivue__content-title,
  .Notivue__content-message {
    @apply text-sm;
  }
  .Notivue__content-title {
    @apply font-semibold;
  }
  .Notivue__content-message {
    @apply text-muted-foreground;
  }

  .Notivue__icon {
    @apply !mt-3 !size-5;
  }

  .Notivue__close-icon {
    @apply opacity-40 hover:opacity-100;
  }
  .Notivue__close {
    @apply flex items-center justify-center after:rounded-full;
  }
</style>

When a promise starts, the correct spinner icon is displayed. But after it gets resolved, the same spinner icon is displayed. The only thing that changes is the icon color (from grey to green).

[smastrom]

Hi @BayBreezy, can you please paste the Icon component here?

[BayBreezy]

The icon component is the one from the nuxt-icon package
https://github.com/nuxt-modules/icon

Idk what happened, but it just stopped working since the update. It used to work fine.

[smastrom]

Hi @BayBreezy, sorry but the issue got closed automatically after merging the PR.

According to my tests, this is now fixed in v2.4.4 which is now publishing on CI, just wait for 5 minutes then update with pnpm add notivue@latest.

Thank you very much for raising it as this was a regression introduced in v2.3.0 where I basically forgot to remove 1 line of code added while developing.

Have a good one and enjoy!

[BayBreezy]

@smastrom Thank you for the quick fix.
Everything is working as it should

Have a great day too!