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

[noook]

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 ?

[antfu]

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)

[noook]

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 ?

[antfu]

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

[garyo]

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" />