\r\n```\r\n\r\n2. If you want to have `\u003CIcon>` load an **SFC** that is nested in folders - that's easy:\r\n\r\n```js\r\n// Assuming: `components/global/CoolStuff/MyIcon.vue`\r\n\r\n\u003CIcon name=\"CoolStuffMyIcon\" /> \r\n```\r\n\r\n3. However, if you have an elaborate set of custom icons (`.svg` extension) that are organized in folders, you would currently need an individual `.vue` icon to go along with every single one.\r\n\r\n```js\r\n// Assuming: `{public|assets}/icons/brand/MyIcon.svg\r\n// Assuming: `components/global/icons/brand/MyIcon.vue`\r\n\r\n// Assuming: `{public|assets}/icons/brand/MyOtherIcon.svg\r\n// Assuming: `components/global/icons/brand/MyOtherIcon.vue`\r\n\r\n\u003CIcon name=\"IconsBrandMyIcon\" />\r\n\u003CIcon name=\"IconsBrandMyOtherIcon\" />\r\n\r\n// etc.\r\n```\r\n\r\nThis means you need to manage a folder of SVGs as well as their matching SFCs. \r\n\r\nIs there a solution?",[3035],{"name":3036,"color":3037},"enhancement","a2eeef",75,"icon","Feature request: A way to manage custom SVGs that are nested inside folders.","2023-08-07T11:42:42Z","https://github.com/nuxt/icon/issues/75",0.7164608,{"description":3045,"labels":3046,"number":3052,"owner":3025,"repository":3026,"state":3053,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### Description\n\nHi there. We are moving our app to NuxtUI and we are loving it so far! Really appreciative of all your hard work on this amazing package. Our stack is NuxtUI+Inertia+Rails.\n\nI spent part of my weekend digging into UIcon and Iconify. Pardon my ignorance if I've missed something obvious, I'm new to this part of the ecosystem... I thought it would be useful to put some thoughts in here and collect what I've learned.\n\n1. UIcon/Iconify always load icons from the network (`api.iconify.design`)\n2. It's not really possible to use NuxtUI without relying heavily on UIcon/Iconify due to various icon attributes in the components.\n3. I know unplug-icons and Nuxt have some support for bundled icons, but they don't apply if you are using Nuxt UI standalone.\n\nSee #4167 and others\n\nWe want to bundle our icons to avoid a dependency on api.iconify.design. I ended up writing a script that scanned our app for icon names and builds a custom `icons.json` file. I put some custom icons in there too using `@iconify/tools`... `icons.json` can be loaded into iconify with `addCollection()`. In dev I also warn on missing icons via `setCustomIconsLoader()`.\n\nDoes that sound correct? Are there solutions I'm missing?? I'd be happy to contribute doc updates or whatever if that would be helpful.\n\nThanks again!\n\n### Additional context\n\n_No response_",[3047,3048,3049],{"name":3036,"color":3037},{"name":3022,"color":3023},{"name":3050,"color":3051},"triage","ffffff",4481,"closed","thoughts on UIcon/Iconify","2025-07-10T09:59:29Z","https://github.com/nuxt/ui/issues/4481",0.6797127,{"description":3059,"labels":3060,"number":3061,"owner":3025,"repository":3039,"state":3053,"title":3062,"updated_at":3063,"url":3064,"score":3065},"The Nuxt Icon module supports local bundling out-of-the-box, and the client bundle is enabled by default. However, when running `nuxt generate`, the icon bundles are still being loaded from the Iconify CDN instead of using the local bundles.\n\nThe documentation already mentions that when `ssr: false`, you need to set `provider: \"server\"` if you want to use local collections.\n\nSince `nuxt generate `is equivalent to `ssr: false` (as it's generating a static site), it would be helpful to mention this in the documentation explicitly.\n\nThis clarification would benefit both developers and tools like LLMs, helping to make the integration smoother.\n\n# Reproduce\n@nuxt/ui: 2.20.0 (which include @nuxt/icon 1.10.3)\nnuxt.config.ts\n```\nexport default defineNuxtConfig({\n modules: ['@nuxt/ui'],\n icon: {\n customCollections: [\n {\n prefix: 'postpilot',\n dir: resolve(__dirname, 'assets/postpilot-icons'),\n },\n ],\n },\n})\n```",[],403,"Docs: Highlight the need to use provider: 'server' when using 'nuxt generate'","2025-06-15T00:09:19Z","https://github.com/nuxt/icon/issues/403",0.69468904,{"description":3067,"labels":3068,"number":3069,"owner":3025,"repository":3039,"state":3053,"title":3070,"updated_at":3071,"url":3072,"score":3073},"### Motivation\r\n\r\nAs is, iconify is great for free, public icon sets. For commercial purposes, you may want to use commercially licensed icon pack - the most popular example being [Font Awesome Pro](https://fontawesome.com/icons). Iconify [already provides](https://iconify.design/docs/libraries/tools/examples/import-fa-pro.html) a way of converting custom icon packs into `IconifyJSON` definition. However, Including the whole `IconifyJSON` in the app is costly, it can easily weigh over 100 kB (raw). Therefore, iconify by default uses API provider to deliver only the requested icon definitions on demand. It is currently not possible to easily host your own icon packs definitions.\r\n\r\n### Feature Request\r\nSince nuxt already hosts server routes, it would be great if the module could provide a streamlined method of hosting Iconify API provider. This way, the end-user could easily use their non-free icon packs benefiting from the on-demand architecture of iconifi's `loadIcon`.\r\n\r\nExample module configuration could look like this:\r\n```ts\r\ndefineAppConfig({\r\n nuxtIcon: {\r\n customCollections: [\r\n resolve('./assets/icons/collections/my-icons.json')\r\n ]\r\n }\r\n})\r\n```\r\n\r\nTo achieve this, the module would have to expose http API conforming to the [Iconify API standard](https://iconify.design/docs/api/icon-data.html#query). The API is very straight forward\r\n\r\nExample definition:\r\n```json\r\n{\r\n \"prefix\": \"my-icons\",\r\n \"lastModified\": 1691181322,\r\n \"icons\": {\r\n \"a\": { \"body\": \"\u003Cpath d=\\\"_path_a_\\\"/>\" },\r\n \"b\": { \"body\": \"\u003Cpath d=\\\"_path_b_\\\"/>\" },\r\n \"c\": { \"body\": \"\u003Cpath d=\\\"_path_c_\\\"/>\" }\r\n },\r\n \"width\": 24,\r\n \"height\": 24,\r\n}\r\n```\r\n\r\nExample API response to `GET /api/iconify-provider/my-icons.json?icons=a,c`\r\n```json\r\n{\r\n \"prefix\": \"my-icons\",\r\n \"icons\": {\r\n \"a\": { \"body\": \"\u003Cpath d=\\\"_path_a_\\\"/>\" },\r\n \"c\": { \"body\": \"\u003Cpath d=\\\"_path_c_\\\"/>\" }\r\n },\r\n \"width\": 24,\r\n \"height\": 24,\r\n}\r\n```\r\n\r\nModule would have to register the custom provider with iconify library:\r\n```ts\r\nimport { addAPIProvider } from '@iconify/vue'\r\naddAPIProvider('nuxt', { resources: ['/api/iconify-provider'] })\r\n```\r\n\r\nAnd the icons should be usable as per example:\r\n```html\r\n\u003Cicon name=\"@nuxt:my-icons:a\"/>\r\n\u003Cicon name=\"@nuxt:my-icons:c\"/>\r\n```",[],97,"Feature Request: Built-in API provider for custom IconifyJSON","2024-10-25T16:58:25Z","https://github.com/nuxt/icon/issues/97",0.69539744,{"description":3075,"labels":3076,"number":3077,"owner":3025,"repository":3039,"state":3053,"title":3078,"updated_at":3079,"url":3080,"score":3081},"url(\"data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M20 6c0-2.168-3.663-4-8-4S4 3.832 4 6v2c0 2.168 3.663 4 8 4s8-1.832 8-4V6zm-8 13c-4.337 0-8-1.832-8-4v3c0 2.168 3.663 4 8 4s8-1.832 8-4v-3c0 2.168-3.663 4-8 4z' fill='black'/%3E%3Cpath d='M20 10c0 2.168-3.663 4-8 4s-8-1.832-8-4v3c0 2.168 3.663 4 8 4s8-1.832 8-4v-3z' fill='black'/%3E%3C/svg%3E\")\r\n\r\nThe test environment is fine, but the production environment will not be able to display the icon. If I change the https in xmlns to http, it will display.\r\n\r\n\r\n\r\n",[],221,"[Bug] Icon cannot be displayed when used with nuxt-ui","2024-08-11T05:47:37Z","https://github.com/nuxt/icon/issues/221",0.7025322,{"description":3083,"labels":3084,"number":3094,"owner":3025,"repository":3025,"state":3053,"title":3095,"updated_at":3096,"url":3097,"score":3098},"\n### Environment\n\nNuxt project info: \n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.15.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.8\n- Builder: -\n- User Config: experimental, runtimeConfig, build, devtools, nitro, routeRules, plugins, modules, eslint, pinia, site, delayHydration, i18n, icon, app, content, svgo, sitemap, googleFonts, image, mdc, htmlValidator, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.18.4, @nuxt/image@1.8.0, @nuxt/content@2.13.2, @nuxt/eslint@0.5.7, @nuxtjs/google-fonts@3.2.0, @nuxtjs/fontaine@0.4.3, @nuxtjs/i18n@8.5.5, @nuxtjs/mdc@0.8.3, @nuxtjs/sitemap@6.1.0, @nuxtjs/html-validator@1.8.2, nuxt-delay-hydration@1.3.8, nuxt-svgo@4.0.6, @vueuse/nuxt@11.1.0, @vueuse/motion/nuxt@2.2.5, @pinia/nuxt@0.5.4, @nuxthq/studio@2.0.3, @nuxt/icon@1.5.1, @formkit/auto-animate/nuxt@0.8.2\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nGithub to reproduction: https://github.com/hoachnt/hoachnt-web\n\n### Describe the bug\n\nI don't know what problem is. I try to fix this bug 2 months and think that problem is in nuxt. And yep I saw in the official website of nuxt has same problem\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3085,3088,3091],{"name":3086,"color":3087},"pending triage","E99695",{"name":3089,"color":3090},"needs reproduction","FBCA04",{"name":3092,"color":3093},"possible regression","B90A42",29387,"Icons not rendering on production build when mounting","2024-10-15T06:27:30Z","https://github.com/nuxt/nuxt/issues/29387",0.7032349,{"description":3100,"labels":3101,"number":3107,"owner":3025,"repository":3025,"state":3053,"title":3108,"updated_at":3109,"url":3110,"score":3111},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.14.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.4.0\r\n- Builder: vite\r\n- User Config: nitro, typescript, runtimeConfig, devServerHandlers, modules, app, postcss, routeRules, i18n, schemaOrg, delayHydration, vite\r\n- Runtime Modules: nuxt-delay-hydration@1.2.1, nuxt-schema-org@2.2.0, @nuxtjs/i18n@8.0.0-beta.10\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jaeoi1?file=components%2Ffoo.vue\n\n### Describe the bug\n\nHi,\r\n\r\nAfter upgrade to 3.6.2 : \r\n\r\n**After building** the application (no problem in dev) :\r\n\r\nThe icon's url in the inlined css is ok : \r\n```\r\n[data-icon=foo] {\r\n --icon-custom: url(/_nuxt/ic-ecurie.dfbfbb0a.svg);\r\n}\r\n```\r\n\r\nThe icon's url in the **entry.css gives a 404**\r\n```\r\n[data-icon=foo] {\r\n --icon-custom: url(./ic-ecurie.dfbfbb0a.svg);\r\n}\r\n```\r\n\r\nThere's no `_nuxt` in the url because the asset is in the same directory as the css but the browser consider it not and resolve with his path.\r\n\r\n\r\nMaybe i make something wrong but I see no problems in Nuxt 3.5.3 :thinking: \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3102,3105,3106],{"name":3103,"color":3104},"3.x","29bc7f",{"name":3086,"color":3087},{"name":3089,"color":3090},22086,"Bad path of assets after 3.6 upgrade","2023-07-19T06:47:37Z","https://github.com/nuxt/nuxt/issues/22086",0.71829456,{"description":3113,"labels":3114,"number":3115,"owner":3025,"repository":3039,"state":3053,"title":3116,"updated_at":3117,"url":3118,"score":3119},"When I used the latest [Nuxt UI Pro Docs Theme](https://github.com/nuxt-ui-pro/docs) and added Nuxt Scripts, I encountered some missing icons.\r\n\r\n**To reproduce:**\r\n\r\n- Clone \"Nuxt UI Pro Docs\"\r\n- Add Nuxt Scripts as dependency\r\n- Deploy to Vercel with `npx nuxi generate`\r\n- Find missing Icons \r\n\r\n\r\n**Missing Icons when Client Side Rendering:**\r\n\u003Cimg width=\"940\" alt=\"image\" src=\"https://github.com/user-attachments/assets/acdfa7df-ded1-4811-8305-320ca99303c2\">\r\n\r\n**Cannot Find icons:**\r\n\u003Cimg width=\"1179\" alt=\"image\" src=\"https://github.com/user-attachments/assets/fe1135ff-9ef2-4157-bd58-dc7e00f566c1\">\r\n\r\n**Server Rendered:** \r\n\u003Cimg width=\"810\" alt=\"image\" src=\"https://github.com/user-attachments/assets/4f5d37a0-b5f1-4521-b566-f0a74c034427\">\r\n\r\nMaybe this is also interesting for you @benjamincanac, @harlan-zw",[],220,"Issues when Prerender with `nuxt generate`","2024-07-30T17:48:07Z","https://github.com/nuxt/icon/issues/220",0.7197726,{"description":3121,"labels":3122,"number":3128,"owner":3025,"repository":3026,"state":3053,"title":3129,"updated_at":3130,"url":3131,"score":3132},"### Description\n\nHi, in a pure Vue 3 application where I am using Nuxt UI as a plugin in `vite.config`, I have a problem at the client, requests to the api to acquire icons are blocked so the icons do not display, is there any way to access offline / install the icon pack for these icons instead of acquiring them via api request?\n\n### Additional context\n\n_No response_",[3123,3124,3125],{"name":3036,"color":3037},{"name":3022,"color":3023},{"name":3126,"color":3127},"vue","42b883",4167,"Offline icons in Vite configuration","2025-05-28T21:33:03Z","https://github.com/nuxt/ui/issues/4167",0.7237117,["Reactive",3134],{},["Set"],["ShallowReactive",3137],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8v_RlYXRuaob9zzkVe4AT7bUKUuv_k2RkgimwMC2eWc":-1},"/nuxt/ui/4541"]