"Unable to locate X icon!" without restarting dev server

[bholmesdev]

What version of astro-icon are you using?

v1.1.0

Astro Info

Astro                    v3.2.3
Node                     v18.18.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/markdoc
                         @astrojs/tailwind
                         astro-icon

If this issue only occurs in one browser, which browser is a problem?

Chrome

Describe the Bug

When adding a new entry to the icons/ directory, I see an "unable to locate X icon!" error. Restarting the dev server resolves the issue. Strangely, this does not occur on initial installation or for the first icon added to icons/. However, after restarting the dev server once and adding more additions to icons/, the error appears.

See stackblitz example below. Try copying a .svg entry under a new name and update the Icon in pages/index.astro to reference it.

What's the expected result?

Updates to icons/ are detected while the dev server is running.

Link to Minimal Reproducible Example

https://stackblitz.com/~/edit/github-ds52xs

[felixzrte]

I can't get it to work even if I restart the dev server

[bobhuf]

Same issue here, unfortunately.

[Naryalin]

Same issue here but it don't work even if restarting the dev server. It loads small svgs with restarting the dev server, but big svgs are not recognized.

[natemoo-re]

Hmm, very odd. Thanks for the repro! I'll try to figure out what's going on here. Might need to add an explicit watcher for the icons/ directory in the Vite plugin so we can rebuild the virtual module when that's needed.

[hkbertoson]

Not sure if this is related but seems to be. But if I update my Astro Config to have a new icon. I have to restart the dev server for it to pick up that a new one is there. Otherwise, it says that it does not exist.

Start the page and then in the config. Add a new icon and try to use it.

https://stackblitz.com/edit/withastro-astro-qh7fcg

[theysamtheirs]

also reporting the same issue!

[faizananwerali]

+1

Same thing happend to me, had to restart dev server everytime

[anridev24]

+1

[AhmedHamedd2017]

+1

[cotton123236]

+1

Same problem, v0.8.3 is working fine! But it seems no longer support the latest version of Astro.

[cotton123236]

It seems to be caused by here.

astro-icon/packages/core/src/vite-plugin-astro-icon.ts

Line 33 in a4ff873

async load(id) {

The icons only be loaded when vite server start, maybe you can add a fs.watch to watch icons dir or any other smarter way to update collections["local"].

Thanks for this great integration by the way.

[RayyanNafees]

Nested SVG give locate issues

I was cloning the tailwind studio website and only the 2nd & 5th SVG used in the code base was giving errors to be located because only those 2 were nested svg

While the rest SVGs on the page loaded prefectly

Any SVG with such a structure will break

<svg viewBox="0 0 130 32" aria-hidden="true" class="hidden h-8 sm:block">
  <svg viewBox="0 0 32 32" aria-hidden="true" preserveAspectRatio="xMinYMid meet">
    <rect clip-path="url(#:Rcmkra:-clip)" class="h-8 transition-all duration-300 fill-white w-0 group-hover/logo:w-8">
    </rect>
    <use href="#:Rcmkra:-path" class="stroke-white" fill="none" stroke-width="1.5">
    </use>
    <defs>
      <path id=":Rcmkra:-path"
        d="">
      </path>
      <clipPath id=":Rcmkra:-clip">
        <use href="#:Rcmkra:-path"> </use>
      </clipPath>
    </defs>
  </svg>
  <path class="fill-white"
    d="">
  </path>
</svg>

[bitsmakerde]

I get the same error. I can't use it.

[carlkentor]

Same issue ;(

[ToqYang]

Same issue v1.1.1 but i tried to restart and it doesnt work

https://github.com/easy-post-ia-1/easy-post-ia-landing/tree/KAN-18-Home
Commit: 689f75c8fe9ca79612e33be71a32082a60444813