Iconify endpoint for local collections fails because rendering mode is client-side only

[Neil Richter]

I am using @nuxt/icon in a Nuxt app where the rendering mode is client-side only. According to the documentation:

By default, this module will create a server endpoint /api/_nuxt_icon/:collection to serve the icons from your local server bundle

However there shouldn't be an api directory in this situation as it is bundled under the server directory and this one is not used for client-side only apps

This results in the app makign a request to https://<host>/api/_nuxt_icon/tri.json?icons=paperplane, this returns the Nuxt's 404 error page, then it makes a request to https://api.iconify.design/tri.json?icons=paperplane

Is that supposed to happen ? Or does the application need additional configuration for this usecase ?

[Anthony Fu]

Do you see ssr: false? Nuxt Icon works mainly with the server, on ssr:false it will fallback to Iconify's public API, which does not have your custom icon. I am not sure if there would be a solution to that, or we might need to update the docs to make it clear (that custom icons only works with a server)

[Neil Richter]

What do you mean by "Do you see" ? ssr: false is how I achieve the client-side only rendering mode so this is supposedly the only thing I set to achieve this behaviour

Okay, I understand. We are effectively dealing with custom icons, not many so we could easily turn them into inline svgs. So I guess for the moment the best thing to do is to update the documentation to explicit this constraint.

These is a vague idea and I haven't checked the implementation behind custom icon collection, but perhaps during the build phase we could detect the rendering mode, and move the icon assets into the public folder instead of the API folder.

I guess there is a little bit more to this, but if the icons can be statically detected at build time we could just insert them in the build ?

[Anthony Fu]

The point of Nuxt Icon is to handle dynamic icons loading. We couldn't statically detect the case of <Icon :icon="name" />. For static, built-time solution I would recommend using UnoCSS's icon preset along side

[Gary Oberbrunner]

I may be seeing this same issue. I'm doing nuxt generate to generate a static site, and the icons don't show up (they are fine in dev mode). I installed the icon uil module locally. But I don't see any way /api/_nuxt_icon/uil.json?icons=moon%2Csun could return a useful result -- it gives a 404.
My nuxt/vue component just has <Icon v-if="colorMode.preference === 'dark'" name="uil:moon" />

[Rylan Harper]

Is there any update on this? It seems this package does not work when running nuxt generate. Interestingly, it seems icons appear in components that are not within the nuxt-page component in my app.vue. For instance, my header.vue and footer.vue icons appear, but all icons with my pages (and the components that make up them), do not appear.

Update: I switched my site to SSR and the icons are working now!

[Daniel Vella]

I have the same (or similar) issue. On first load, the icons show up on the page I visit, but if I navigate to another page on my app, I get a 404. If I refresh this page, the icons show up and the 404 is not thrown. Navigating to other pages repeats this behaviour consistently. Strange behaviour.

GET /api/_nuxt_icon/mdi.json?icons=alert-decagram%2Carrow-left-circle-outline%2Ccalculator-variant%2Crobot-excited-outline%2Cvideo-input-antenna 404 (Not Found)

Running nuxt 3.12.3 and @nuxt/icon 1.0.0. The below is a snippet from nuxt.config.ts. I create the app using nuxt build and the serve the output. I have other routes apart from the ones listed below which load dynamic data.

ssr: true,
 
  nitro: {
    prerender: {
      routes: [
        '/about', 
        '/blog/all', 
        '/blog/the-creation', 
      ]
    }
  },

  routeRules: {
      '/blog/**': { prerender: true },
  },

[Paul Melero]

I may be seeing this same issue. I'm doing nuxt generate to generate a static site

Sorry because I know it's not related to the original question (about custom collections), but I was having this same issue @garyo mentioned with SSG. My solution was to use nuxi build instead (not purely static anymore). I was using Netlify and it worked with minimal configuration. See https://nuxt.com/deploy/netlify.

[Gary Oberbrunner]

My solution was to use nuxi build instead (not purely static anymore)

Sure, why not add a back end to the static site just to fetch icons?! (I thought about that too, but couldn't go that far)

[Rajat Jindal]

My solution was to use nuxi build instead (not purely static anymore). I was using Netlify and it worked with minimal configuration.

Hi @gangsthub, could you please elaborate a bit how you fixed it. I am running into same problem.

I tried:

nuxi build
node .output/server/index.mjs -> does not work on local setup
./node_modules/.bin/nuxi start -> this work on local setup

but deployed on Netlify, it does not work.

[Anthony Fu]

The default should be improved in de92533

And the docs will be improved in #206 - let me know of anything else is missing

[Paul Melero]

could you please elaborate a bit how you fixed it

@rajatjindal, when changing from nuxi generate to nuxi build you will have to change the build commands in your Netlify/Vercel/etc configuration. You can see mine here:

https://github.com/gangsthub/graficos.net/blob/3f28a753714590812d8e893ff623f008f71c9753/netlify.toml

(The fact that I'm using pnpm should be irrelevant in this context)

I linked the docs for deploying in Netlify because that's the platform I'm currently using and I'm only using the default configuration.

But, as @antfu said, I'd try to use the static build again with the latest version after de92533 😉