Auto-Import Resolver Breaks Slidev Icon Resolution

[sghuang19]

Hi all! I'm building an addon that brings PrimeVue components to Slidev: https://github.com/sghuang19/slidev-addon-prime.

The components can be used successfully. However, the icon in the toggle mode toggle is not displaying.

With the PrimeVue resolver turned off:

<button class="slidev-icon-btn" title="Switch to light mode theme">
  <span class="sr-only">Switch to light mode theme</span
  ><svg class="slidev-icon" viewBox="0 0 32 32" width="1.2em" height="1.2em">
    <path
      fill="currentColor"
      d="M13.503 5.414a15.076 15.076 0 0 0 11.593 18.194a11.1 11.1 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1 1 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.07 13.07 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3"
    ></path>
  </svg>
</button>

With the resolver turned on:

<button class="slidev-icon-btn" title="Switch to light mode theme">
  <span class="sr-only">Switch to light mode theme</span
  ><carbon-moon></carbon-moon>
</button>

Apparently the <carbon-moon> icon is treated as a builtin in element and is not correctly resolved. Perhaps some internal resolvers are overridden?

---

Here's how it's done:

Resolver config:

import { defineConfig } from "vite";
import { PrimeVueResolver } from "@primevue/auto-import-resolver";

export default defineConfig({
  slidev: {
    components: {
      resolvers: [PrimeVueResolver()],
    },
  },
});

App config:

import { defineAppSetup } from "@slidev/types";
import PrimeVue from "primevue/config";
import Aura from "@primevue/themes/aura";

export default defineAppSetup(({ app }) => {
  // TODO: support specifying themes in head matter
  app.use(PrimeVue, {
    theme: {
      preset: Aura,
      options: {
        // PrimeVue uses system dark mode selector by default, which conflicts
        // with the toggle in Slidev
        darkModeSelector: ".dark"
      }
    },
  });
});