component as \u003CNuxtIcon.../> or \u003CBaseIcon.../> instead by default. \r\n\r\nAre these alternate component name already available as aliases when using the nuxt-icon module?",[],58,"closed","Suggestion: Icon -> NuxtIcon or BaseIcon","2023-03-14T21:38:49Z","https://github.com/nuxt/icon/issues/58",0.6389152,{"description":3157,"labels":3158,"number":3159,"owner":3140,"repository":3141,"state":3151,"title":3160,"updated_at":3161,"url":3162,"score":3163},"In my own projects I want to name how I build the component \"Icon\".\r\n\r\nI think as a package it would make way more sense for the component name to be \"NuxtIcon\" with an \"icon\" class instead of just \"Icon\" with name.\r\n\r\nAlso see this:\r\nhttps://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names\r\n(not super relevant due to how I would use it probably lol)\r\n\r\nI'd like to look at my own codebase and make the icon component custom, like:\r\n\r\n```html\r\n\u003C!-- Icon.vue -->\r\n\u003Ctemplate>\r\n\u003Cdiv class=\"aspect-square rounded-full h-20 text-2xl flex items-center justify-center text-white\">\r\n \u003CNuxtIcon :icon=\"icon\" />\r\n\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\ndefineProps({ icon: String })\r\n\u003C/script>\r\n```",[],174,"Can the Base component be changed to \"NuxtIcon\" instead of \"Icon\" with the \"name\" attribute?","2024-06-26T16:45:07Z","https://github.com/nuxt/icon/issues/174",0.6501873,{"description":3165,"labels":3166,"number":3167,"owner":3140,"repository":3141,"state":3151,"title":3168,"updated_at":3169,"url":3170,"score":3171},"Hi,\n\nI’ve searched high and low and didn’t find this covered anywhere, apologies if this has been addressed already.\n\nI am using @nuxt/icon with @iconify and the VS Code Intellisense plugin, works great.\n\nI have a custom component that I would like to pass autocompleted string values to, something like:\n\n```html\n\u003CHighlight\n icon-name=\"...\"\n\u003C!-- ^ This should suggest values such as \"bxs:success\" etc, same as the \u003CIcon> component directly -->\n```\n\nI tried this:\n\n```ts\n// Highlight.vue\n\nimport type { ExtractPublicPropTypes } from 'vue';\nimport { Icon } from '#components';\ntype IconName = ExtractPublicPropTypes\u003Ctypeof Icon['name']>\n\nconst props = defineProps\u003C{\n iconName: IconName\n}>()\n```\n\nI get a vague `{} & {}` as the resulting type. Any help appreciated!",[],412,"Infer \u003CIcon> \"name\" as prop to be used in a custom component","2025-07-02T09:24:15Z","https://github.com/nuxt/icon/issues/412",0.7005637,{"description":3173,"labels":3174,"number":3175,"owner":3140,"repository":3141,"state":3151,"title":3176,"updated_at":3177,"url":3178,"score":3179},"Although it looks redundant, Iconify uses `\u003CIcon icon=\"...\" />` as the Vue component. Since this module uses Iconify, why not keeping the same structure so we can just copy the component from their lib? An alias prop would be welcomed if I'm sounding too radical 😋 That way we can use both `name` and `icon`.",[],51,"[question] Why not using `icon` as a prop instead of `name`?","2023-02-16T15:53:34Z","https://github.com/nuxt/icon/issues/51",0.70127004,{"description":3181,"labels":3182,"number":3192,"owner":3140,"repository":3193,"state":3151,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### 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_",[3183,3186,3189],{"name":3184,"color":3185},"enhancement","a2eeef",{"name":3187,"color":3188},"v3","49DCB8",{"name":3190,"color":3191},"triage","ffffff",4481,"ui","thoughts on UIcon/Iconify","2025-07-10T09:59:29Z","https://github.com/nuxt/ui/issues/4481",0.717572,{"description":3199,"labels":3200,"number":661,"owner":3140,"repository":3141,"state":3151,"title":3201,"updated_at":3202,"url":3203,"score":3204},"Is it possible to change the `/components/global` directory. I have checked the code of this module, but it seems to me that it could be something that's inside Nuxt 3?\r\n\r\nProposition:\r\n```js\r\n nuxtIcon: {\r\n size: \"16px\",\r\n source: '~/components/icons' // or an array with multiple values\r\n },\r\n```",[],"Feature: Possible to change the icons directory","2023-01-19T16:59:35Z","https://github.com/nuxt/icon/issues/18",0.71829647,{"description":3206,"labels":3207,"number":3217,"owner":3140,"repository":3140,"state":3151,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.5.0\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jblieu-fynag4\n\n### Describe the bug\n\nNuxt can no longer resolve a component if its name starts with its containing folder's name, ex:\r\n\r\ncomponent path: `components/Icon/Icones`\r\n\r\napp.vue:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CIconIcones />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nconsole output:\r\n```sh\r\n[Vue warn]: Failed to resolve component: IconIcones 21:27:18\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\n```\n\n### Additional context\n\nThe above example works in Nuxt 3.4.x\n\n### Logs\n\n_No response_",[3208,3211,3214],{"name":3209,"color":3210},"3.x","29bc7f",{"name":3212,"color":3213},"bug","d73a4a",{"name":3215,"color":3216},"🔨 p3-minor","FBCA04",20937,"Regression: Cannot resolve component if its folder's name is a prefix of the component's name","2023-05-19T11:23:25Z","https://github.com/nuxt/nuxt/issues/20937",0.7233115,{"description":3223,"labels":3224,"number":3228,"owner":3140,"repository":3141,"state":3151,"title":3229,"updated_at":3230,"url":3231,"score":3232},"Can't we define where we'll be storing those custom icon components in our project?\r\nThis sounds more sane `components/icons`... I looked at the source, but I found nothing that defines this path.\r\n\r\nSo could be that I'm blind, or this `global` directory is something that Nuxt handles?\r\n\r\nKind regards.",[3225],{"name":3226,"color":3227},"question","d876e3",60,"Why `components/global` exactly?","2023-03-13T14:50:53Z","https://github.com/nuxt/icon/issues/60",0.7266647,{"description":3234,"labels":3235,"number":3240,"owner":3140,"repository":3193,"state":3151,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### Description\n\nUse case: Dynamically loaded icons are forbidden, be it by security requirements or by a requirement to always work offline. Icons are instead defined as Vue components, be it with custom icon components, or by using [`unplugin-icons`](https://github.com/unplugin/unplugin-icons).\n\nIn case of a [`UButton`](https://ui.nuxt.com/components/button), I think you can just use `leading` and `trailing` slots. But I do not think there is a simple way of just replacing an icon in case of [`USlideover`](https://ui.nuxt.com/components/slideover)'s `closeIcon` -- there is only a slot named `close`.\n\n### Additional context\n\n_No response_",[3236,3237,3238],{"name":3184,"color":3185},{"name":3190,"color":3191},{"name":3239,"color":3188},"v4",4728,"Allow passing components as icons instead of strings","2025-09-01T10:04:35Z","https://github.com/nuxt/ui/issues/4728",0.73212886,["Reactive",3246],{},["Set"],["ShallowReactive",3249],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fItrkCkce-TQ-wzxnuXoI6hjruHswadmFdDCzxXtKhTc":-1},"/nuxt/icon/3"]