\n\n\u003Cimg width=\"912\" height=\"578\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/71fb37a4-3959-413f-9076-74f63eee0108\" />\n\nNormal button:\n```html\n\u003CUButton\n color=\"info\"\n variant=\"soft\"\n size=\"xl\"\n icon=\"i-heroicons-question-mark-circle\"\n class=\"rounded-full\"\n aria-label=\"Show keyboard shortcuts\"\n />\n```\n\nIm using Nuxt4 and NuxtUI 3",[],416,"NuxtUI icons forced to width and height 1em!","2025-07-22T16:50:58Z","https://github.com/nuxt/icon/issues/416",0.7667178,{"description":3166,"labels":3167,"number":3168,"owner":3141,"repository":3152,"state":3143,"title":3169,"updated_at":3170,"url":3171,"score":3172},"This nuxt-icon module works well in my nuxt3 project, but I found a small problem: \r\n\r\nI have 100 pictures on my home page, then I put such as 'edit' icon and 'love' icon on every pictures , which turn out to be many duplicated characters on the page because of the `path` of every `svg` is very long but they are same `\u003Cpath>`. \r\n\r\nCould it be possible to use `\u003Cuse>` to resolve that problem for ssr when building?",[],66,"Too much duplicated characters if use a same svg icon many times in one page","2023-03-30T02:06:11Z","https://github.com/nuxt/icon/issues/66",0.7699164,{"description":3174,"labels":3175,"number":3176,"owner":3141,"repository":3152,"state":3177,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### 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,"closed","Feature Request: Built-in API provider for custom IconifyJSON","2024-10-25T16:58:25Z","https://github.com/nuxt/icon/issues/97",0.74145925,{"description":3183,"labels":3184,"number":3185,"owner":3141,"repository":3152,"state":3177,"title":3186,"updated_at":3187,"url":3188,"score":3189},"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.74214876,{"description":3191,"labels":3192,"number":3196,"owner":3141,"repository":3152,"state":3177,"title":3197,"updated_at":3198,"url":3199,"score":3200},"## Project deps\r\n```json\r\n\"nuxt\": \"^3.11.2\",\r\n\"nuxt-icon\": \"^1.0.0-beta.4\"\r\n```\r\n\r\n## Problem \r\nWhen i use custom collection the generated svg code contains double tags something like 👇\r\n\r\n```html\r\n\u003Csvg ...>\r\n \u003Csvg ...>\r\n \u003Cpath ... />\r\n \u003C/svg>\r\n\u003C/svg>\r\n```\r\n\r\n\r\n## Stackblitz \r\n[Reproduction link](https://stackblitz.com/edit/nuxt-starter-6nnfpa?file=app.vue)\r\n\r\n\r\n## Screenshot\r\n\r\n### Svg Mode\r\n\r\n\r\n### Css mode\r\n\r\n\r\n",[3193],{"name":3194,"color":3195},"bug","d73a4a",165,"Double svg tag when using custom collection","2024-05-28T11:33:20Z","https://github.com/nuxt/icon/issues/165",0.75575805,{"description":3202,"labels":3203,"number":3209,"owner":3141,"repository":3142,"state":3177,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### 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_",[3204,3205,3208],{"name":3135,"color":3136},{"name":3206,"color":3207},"v3","49DCB8",{"name":3138,"color":3139},4481,"thoughts on UIcon/Iconify","2025-07-10T09:59:29Z","https://github.com/nuxt/ui/issues/4481",0.76514417,{"description":3215,"labels":3216,"number":3220,"owner":3141,"repository":3141,"state":3177,"title":3221,"updated_at":3222,"url":3223,"score":3224},"how can I use nuxt.generate in my custom request, it can't work in my example.\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2532\">#c2532\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3217],{"name":3218,"color":3219},"2.x","d4c5f9",2917,"nuxt.generate()","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2917",0.7697541,{"description":3226,"labels":3227,"number":3228,"owner":3141,"repository":3152,"state":3177,"title":3229,"updated_at":3230,"url":3231,"score":3232},"https://stackblitz.com/edit/nuxt-icon-playground-ixa4jk?file=assets%2Fmy-icons%2Ffoo.svg,nuxt.config.ts,app.vue",[],171,"customCollections error","2024-07-18T22:46:21Z","https://github.com/nuxt/icon/issues/171",0.77122605,["Reactive",3234],{},["Set"],["ShallowReactive",3237],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fz3v0NhI-SB8r8t526wUqW2EJrqI_EFvsu9xEVO7_jvk":-1},"/nuxt/icon/408"]