Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with fetching icons (clientBundle) #376

Open
PetyXbron opened this issue Mar 21, 2025 · 0 comments
Open

Problem with fetching icons (clientBundle) #376

PetyXbron opened this issue Mar 21, 2025 · 0 comments

Comments

@PetyXbron
Copy link

TLDR;
I am having problem with clientBundle working out. (I need to prefetch icons and generate CSS classes for them.)

nuxt 3.16.1
@nuxt/icon 1.11.0
doing this because apexcharts icons

I am having a problem with fetching my desired icons in advance. I am gladly using <Icon> elements, but in one case I need 5 icons in "vanilla" HTML. So I am using <span class="iconify i-pack:name"</span> element.
The problem is that this way it doesn't go through the @nuxt/icon module so the class i-pack:name doesn't exist.

Temporary fix is pasting these elements before the case:

<Icon style="display: none;" name="heroicons:magnifying-glass-plus-16-solid" />
<Icon style="display: none;" name="heroicons:magnifying-glass-minus-16-solid" />
<Icon style="display: none;" name="heroicons:arrows-pointing-out-16-solid" />
<Icon style="display: none;" name="heroicons:hand-raised-16-solid" />
<Icon style="display: none;" name="heroicons:arrow-path-16-solid" />

I would love to just use clientBundle in my Nuxt config, like this:

icon: {
  serverBundle: 'remote',
  clientBundle: {
    icons: [
      'heroicons:magnifying-glass-plus-16-solid',
      'heroicons:magnifying-glass-minus-16-solid',
      'heroicons:arrows-pointing-out-16-solid',
      'heroicons:hand-raised-16-solid',
      'heroicons:arrow-path-16-solid',
    ],
    scan: false,
  }
},

and the console writes:

ℹ Nuxt Icon client bundle consist of 5 icons with 2.41KB(uncompressed) in size

but it simply doesn't work as the temprorary solution. Maybe I have misunderstood something in the readme file of @nuxt/icons but I cannot simply find it out.
Any ideas please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant