Icons do not work locally

[fouteox]

Environment

• Operating System: Linux
• Node Version: v22.2.0
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: npm@10.7.0
• Builder: -
• User Config: modules, ssr, vite, devtools, runtimeConfig, app, hooks
• Runtime Modules: @nuxt/ui@2.18.4, @pinia/nuxt@0.5.3, @vueuse/nuxt@10.11.1, @nuxt/eslint@0.3.13, @nuxt/test-utils/module@3.14.1
• Build Modules: -

Version

v2.18.4

Reproduction

no reproduction

Description

Hello, despite the addition in the Nuxt configuration to use icons locally, the API call to https://api.iconify.design/{collection-name} is still being made.

Sorry, I can't reproduce an example repository, as npm is problematic on StackBlitz.

Just use a fresh install with Nuxt 3, set ssr: false, and install a collection locally.

Use an icon like:

<UIcon class="h-5 w-5" name="i-heroicons-cog" />

An API call is still being made.

Additional context

No response

Logs

No response

[noook]

I believe Nuxt Icon is not intended for use with local icons with ssr: false because it requires a server to return your local icons. This issue was already reported on the nuxt/icon repository here: https://github.com/nuxt/icon/issues/178

[fouteox]

I thought the command to install locally solved this problem, right?

npm install @iconify-json/{collection_name}

[nosizejosh]

Same issue. Updating to 2.18.4 breaks icons on local or offline.

"dependencies": {
    "@iconify-json/heroicons": "^1.1.20",
    "@iconify-json/heroicons-outline": "^1.1.10",
    "@iconify-json/icon-park-outline": "^1.1.15",
    "@iconify-json/mdi": "^1.1.66",
    ...
  },

I have these icons in my dependencies but still still doesn't work probably because 2.18.4 requires configuration to be removed form nuxt.config

Is this a feature or a bug and is there a workaround?

[gregorvoinov]

tried to load some local icons but get the same error message...

assets/icons
├── home.svg

  ui: {
    customCollections: [
      {
        prefix: "my-icon",
        dir: "~/assets/icons",
      },
    ],
    safelistColors: ["red"],
  },

   <UIcon name="my-icon:home" class="w-5 h-5 block"></UIcon>

WARN [Icon] Collection my-icon is not found locally We suggest to install it via npm i -D @iconify-json/my-icon to provide the best end-user experience.

I see there is an api call

http://localhost:3000/api/_nuxt_icon/my-icon.json?icons=home

but it returns 404

any idea how I get this running?

[benjamincanac]

@gregorvoinov The customCollections key should be under icon, not ui: https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections

[nosizejosh]

tried with your suggestion but it didn't work.

icon: {
    serverBundle: {
      collections: [
        "icon-park-outline",
        "mdi",
        "heroicons",
        "heroicons-outline",
      ], 
    },
  },

ofetch.37386b05.mjs?v=da1f3f06:272 
 GET https://api.iconify.design/heroicons.json?icons=chevron-down-20-solid%2Cfolder%2Clight-bulb%2Cplus-solid net::ERR_NAME_NOT_RESOLVED
ofetch.37386b05.mjs?v=da1f3f06:272 
 GET https://api.iconify.design/icon-park-outline.json?icons=address-book%2Casse…-thirty-two%2Cchecklist%2Cdocument-folder%2Chome-two%2Clightning%2Csetting net::ERR_NAME_NOT_RESOLVED



[benjamincanac]

@nosizejosh What is your issue exactly? Are you trying to load custom local collections?

[nosizejosh]

same as @fouteox I upgraded to v2.18.4 ,followed the upgrade instruction to remove nuxt-icon and also the

icons:[
    "icon-park-outline",
    "mdi",
   "heroicons",
     "heroicons-outline",
   ],  

from ui. and leaving only

   "dependencies": {
    "@iconify-json/heroicons": "^1.1.20",
    "@iconify-json/heroicons-outline": "^1.1.10",
    "@iconify-json/icon-park-outline": "^1.1.15",
    "@iconify-json/mdi": "^1.1.66",
    ...
  }, 

but now icons fails to work when the app is run locally or offline, with errors such as

  ofetch.37386b05.mjs?v=da1f3f06:272 
 GET https://api.iconify.design/heroicons.json?icons=chevron-down-20-solid%2Cfolder%2Clight-bulb%2Cplus-solid net::ERR_NAME_NOT_RESOLVED
ofetch.37386b05.mjs?v=da1f3f06:272 
 GET https://api.iconify.design/icon-park-outline.json?icons=address-book%2Casse…-thirty-two%2Cchecklist%2Cdocument-folder%2Chome-two%2Clightning%2Csetting net::ERR_NAME_NOT_RESOLVED

[benjamincanac]

And you have ssr: false set, right? Have you tried specifying the icon.clientBundle.icons as suggested on https://github.com/nuxt/icon?tab=readme-ov-file#client-bundle if you use your app offline?

[jsayer101]

And you have ssr: false set, right? Have you tried specifying the icon.clientBundle.icons as suggested on https://github.com/nuxt/icon?tab=readme-ov-file#client-bundle if you use your app offline?

Hi, I'm also experiencing the same issue, we have ssr:false and we do not have access to internet, so every calls to Iconify are resulting in network errors. Is it possible to pass '*' so all icons are bundled with the client ? 🤔

Thanks !

[benjamincanac]

@antfu any recommendations for this case?

[antfu]

I am still thinking about a solution to properly "scan" the usage of icons to automatically includes the used icons in the client bundle. For now unfortunately, you will need to specify theme manually

[fouteox]

Is it possible to know what else we need to put other than this in the package.json to be able to use the icons locally without making an api call when we use "ssr: false"?

  "devDependencies": {
    "@iconify-json/heroicons": "^1.1.24",
  },

[jsayer101]

I am still thinking about a solution to properly "scan" the usage of icons to automatically includes the used icons in the client bundle. For now unfortunately, you will need to specify theme manually

Hi @antfu , thanks for the fast answer.

In my app, some icons are user defined, so they are dynamically initalized, so I don't really know which one I should import. It could be convenient to still have this all-like '*' even though you implement a function that scan icons in the code base 🤔 .

[nosizejosh]

I have tried many variations of your suggestions but none has worked.

icon: {
    clientBundle: {
      // list of icons to include in the client bundle
      icons: [
        // 'uil:github',
        // 'logos:vitejs'   
        'heroicons:plus-solid',   
        'i-ic:twotone-plus',
        'i-icon-park-outline:help',
        'i-icon-park-outline:checklist',
        'i-icon-park-outline:warehousing',
      ],

      // include all custom collections in the client bundle
      includeCustomCollections: true, 
    },
  },

this is the current setup based on your suggestions but still getting errors

[antfu]

Please upgrade @nuxt/icon to v1.5.0 and add the config as https://github.com/nuxt/icon/pull/243

Give it a try and let me know if it improves your user cases.

[eduardo-faith]

Please upgrade @nuxt/icon to v1.5.0 and add the config as nuxt/icon#243

Give it a try and let me know if it improves your user cases.

I'm not OP but had the same problem using NuxtUI. Updated in package.json:

  "overrides": {
    "@nuxt/icon": "1.5.0"
  },

Works! Thanks @antfu for you effort 💪🚀

[nosizejosh]

It works now. Thank you!

[fouteox]

I confirm that this fixes the issue by updating to 1.5.0 and adding scan: true in nuxt.config.

Many thanks!