Description
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/icon1.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?