Problem with fetching icons (clientBundle)
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 42/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- nuxt, typescript
- Domain
- frontend
Research direction
Start with the Nuxt config shown in the issue and reproduce the five-icon clientBundle setup with scan disabled. Compare the bundled icons with their use in vanilla HTML via the iconify i-pack:name classes and check the @nuxt/icon README behavior. Done means the configured icons produce usable classes outside <Icon> elements, or the limitation is documented clearly.
Written by the indexing model from the issue text.
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?
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 97
- PR merge metrics
- No merged PRs in 30d
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/icon
-
Difficulty 2/5 1-3 hours Newbie friendliness 55/100
-
Allow separate providers for SSR and client (`provider: { server, client }`)Possibly taken @pont1s claimed this 24 days ago. Open
Difficulty 5/5 Over a week Newbie friendliness 45/100
-
Difficulty 3/5 1-2 days Newbie friendliness 65/100
-
Remote server bundle duplicates concurrent collection downloadsPossibly taken @onmax claimed this 47 days ago. Open
Difficulty 3/5 1-2 days Newbie friendliness 68/100
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
Maintainers usually reply within 1 day
-
Difficulty 1/5 1-3 hours Newbie friendliness 72/100
zts212653/clowder-ai#1678 ·
Maintainers usually reply within 1 day
-
good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Progressive-Victory/the-website#680 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100