hide icon request in network ttab

[alniv94]

how to hide these icon requests?

[danjrwalsh]

If you mean from your browser, simply type -nuxt_icon (or -iconify if you're relying on iconify's API) in the 'Filter' bar near the top of the Network tab and it'll hide any requests with that keyword (this can be helpful during development). However, if you mean hide the requests from all clients who use your web application, that's simply not possible.

Now if by "hide" you're actually asking how to prevent these fetch requests from happening in the first place, you'll need to use another icon library. @nuxt/icon does on-demand fetching of icons to reduce client bundle sizes, afaik, there's no way to disable this functionality at this time (you only control which source it's pulled from, local API, iconify API or some CDN).

[ChrisGV04]

As of v1.3.0, the option icon.clientBundle was introduced to manually define the names of icons to include in the build.

Maybe in the future this could be automated, but it's a step in the right direction to avoid network requests.

The other library that I have used for bundled icons is unplugin-icons which works great for those use cases.

[danjrwalsh]

As of v1.3.0, the option icon.clientBundle was introduced to manually define the names of icons to include in the build.

Maybe in the future this could be automated, but it's a step in the right direction to avoid network requests.

The other library that I have used for bundled icons is unplugin-icons which works great for those use cases.

Sweet, I didn't even notice the clientBundle commit made 7 hours before my comment, funny timing!

So there you go @alniv94, in addition to the information I provided in the first paragraph, you also now have the option of bundling the icons in your client bundle too (so disregard the second paragraph of my first comment).

export default defineNuxtConfig({
  modules: [
    '@nuxt/icon'
  ],
  icon: {
    clientBundle: {
      icons: [
        'uil:github',
        'logos:vitejs'
      ],
    },
  },
})

This issue can now be closed.

[antfu]

To the issue itself, there is no way for a web app to "control" the devtools. Talking about clientBundle, I believe it would belong to another topic. Closing this.

[alniv94]

Thanks