Using dynamic icon names fails during build

[shoogstoel]

What version of astro-icon are you using?

^1.1.0

Astro Info

Astro                    v4.8.7
Node                     v21.7.3
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             astro-icon

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

No response

Describe the Bug

Trying to build an overview page for the editors, I am reading the icon folders using Astro.glob, like so:

const icons = await Astro.glob('@assets/**/*.svg');

In the template, I am iterating the list and passing the icons' names to astro-icons Icon component:

{iconNames.map((icon) => (
	<Icon name={icon} />
))}

This works fine in development mode. However, the build fails, giving this error message:
Unable to locate "_astro/address-book.fQue9oP3" icon!

The build works fine if I pass the icon's name in manually.

What's the expected result?

Not sure if this is a known limitation. I would expect the build to succeed.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-erezqu?file=src%2Fpages%2Ficon-test.astro

[y0nei]

Same issue...

[azhirov]

It seems that the issue is related to Astro.glob(). As a workaround, you can use import.meta.glob() instead. Documentation

Here’s the working code:

---
import { Icon } from 'astro-icon/components';

const icons = import.meta.glob('../assets/icons/**/*.svg');
const from = '../assets/icons/'.length;
const to = '.svg'.length * (-1);
const iconNames = Object.keys(icons).map((name) => name.slice(from, to))
console.log(iconNames);
---

<ul>
  {iconNames.map((iconName) => (
    <li>
      <Icon name={iconName} />
    </li>
  ))}
</ul>