Nuxt Icon cannot load custom svgs in SSR
Hello! I am using nuxt 3 with nuxt ui and @nuxt/icon. I have added custom collections in my nuxt config like this:
icon: {
customCollections: [
{
prefix: 'flags',
dir: './assets/icons/flags',
},
],
},
The icons are displayed in the frontend but I get a warning that they can be loaded on the server:
[Icon] failed to load icon
flags:de-de3 Replies
Hi @Matthias. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have enough specific details to directly address your issue with custom SVG icons not loading in SSR with Nuxt Icon. However, I can provide some relevant information and suggestions that might help:
1. Icon Collections: It's recommended to install icon collections locally for better performance and reliability, especially for SSR. As mentioned in the Nuxt UI documentation (https://ui.nuxt.com/getting-started/theming#collections), you can install collections using package managers like npm or pnpm. For example:
This allows icons to be served locally or from serverless functions, which is faster and more reliable for both SSR and client-side rendering.
2. Icon Usage: Make sure you're using the correct syntax for your custom icons. Based on the Nuxt UI documentation (https://ui.nuxt.com/getting-started/theming#icons), icons are typically used with the
i- prefix. In your case, it might look like:
3. Build Process: The issue might be related to how Tailwind CSS and the icon plugin process your custom icons. As mentioned in a Stack Overflow answer (https://stackoverflow.com/questions/77295827), Tailwind CSS bundles only static icons declared in your code. You might need to ensure that your custom icons are properly included in the build process.
4. Nuxt Configuration: Double-check your Nuxt configuration to ensure it's correctly set up for icon handling. The Nuxt UI documentation (https://ui.nuxt.com/getting-started/theming#icons) provides examples of how to configure icons in your app.config.ts file.
5. SSR Considerations: Remember that Nuxt supports different rendering modes, including universal rendering (SSR + CSR) and client-side rendering. As mentioned in the Nuxt documentation on rendering (https://nuxt.com/docs/guide/concepts/rendering), the default is universal rendering, which might affect how icons are loaded.
If the issue persists after checking these points, you might want to create a minimal reproduction of the problem and seek help on the Nuxt GitHub repository or community forums, as this seems to be a specific issue that isn't directly addressed in the provided knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@230344366575714316> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
this was caused by basic auth blocking the api requests, excluding the api routes from basic auth solved the issue