#Icons Not Displaying in Nuxt Studio Deployment

3 messages · Page 1 of 1 (latest)

gritty streamBOT
#

Hi @split jacinth. 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 can offer some insights and potential solutions to your issue with icons not displaying in Nuxt Studio deployment.

  1. Icon Configuration:
    The issue you're experiencing might be related to how icons are configured and bundled in your Nuxt project. According to the Nuxt UI documentation (https://ui.nuxt.com/getting-started/theming#icons), Nuxt UI uses @nuxt/icon which is based on Iconify. However, your specific issue mentions i-skill-icons, which might be using a different system.

  2. Dynamic Icons and Tailwind:
    As mentioned in a Stack Overflow post (https://stackoverflow.com/questions/77295827), there can be issues with dynamic icons when using Tailwind CSS. The post states: "It uses the egoist/tailwindcss-icons which based on Tailwind engine that bundles only the static icons declared in your code". This means that dynamically changing icons based on theme might not work as expected if not properly configured.

  3. Local Storage and Color Mode:
    The Nuxt UI documentation (https://ui.nuxt.com/getting-started/theming#dark-mode) mentions that if you're stuck in a particular color mode, it might be due to local storage settings. In your deployment environment, try clearing the nuxt-color-mode entry from the browser's local storage to see if it resolves the issue.

  4. Icon Collections:
    The Nuxt UI documentation (https://ui.nuxt.com/getting-started/theming#icons) recommends installing icon collections locally. You might want to ensure that the i-skill-icons collection is properly installed and configured in your project.

#
  1. Vite Plugin Configuration:
    If you're using a custom SVG plugin, make sure it's properly configured for the production build. The Nuxt documentation (https://nuxt.com/docs/api/kit/builder#examples-3) shows an example of how to add a Vite plugin for SVG icons, which might be relevant if you're using a custom setup for i-skill-icons.

Recommendations:

  1. Verify that the i-skill-icons collection is properly installed and configured for production builds.
  2. Check if the icons are being properly bundled in the production build. You might need to adjust your Vite or Webpack configuration.
  3. Ensure that your color mode configuration is correctly set up for the production environment in Nuxt Studio.
  4. Consider using the @nuxt/icon module directly, as it's designed to work seamlessly with Nuxt and supports a wide range of icons.

If these suggestions don't resolve the issue, you might want to create a minimal reproduction of the problem and share it with the Nuxt community or Nuxt Studio support for more specific assistance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: