\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?",[2885],{"name":2886,"color":2887},"enhancement","a2eeef",75,"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.7276703,{"description":2894,"labels":2895,"number":1499,"owner":2867,"repository":2868,"state":2869,"title":2896,"updated_at":2897,"url":2898,"score":2899},"Consider following code for your app:\r\n```vue\r\n\u003Cstyle>\r\n.loading {\r\n font-size: 2rem;\r\n}\r\n\u003C/style>\r\n\r\n\u003Ctemplate>\r\n \u003CClientOnly>\r\n \u003Ctemplate #fallback>\r\n \u003Cdiv class=\"loading\">\r\n \u003CIcon name=\"svg-spinners:ring-resize\" />\r\n Loading\r\n \u003C/div>\r\n \u003C/template>\r\n \u003Cdiv class=\"content\" ref=\"someRef\">\r\n This text should NOT be large!\r\n Remove the \u003Cpre>ref=\"someRef\"\u003C/pre> from the parent and it works\r\n \u003C/div>\r\n \u003C/ClientOnly>\r\n\u003C/template>\r\n```\r\n\r\n**Expected behaviour when loading the page:**\r\nA big loading spinner, and, when everything is done loading, some normal text, like this:\r\n\r\n\r\n**Instead,** you get this:\r\n\r\n\r\nWhen you remove the `ref=\"someRef\"` from the content div, it works as expected",[],"Unexpected behaviour when using an Icon within ClientOnly fallback","2023-12-18T12:08:48Z","https://github.com/nuxt/icon/issues/129",0.7342797,{"description":2901,"labels":2902,"number":2908,"owner":2867,"repository":2867,"state":2869,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### Describe the feature\r\n\r\nI'm currently trying to rename components from vee-validate (ones like Form, Field and etc) to something more unique since I'm experiencing [this issue](https://github.com/nuxt/nuxt.js/issues/14990) (in my particular case component in sub-folder named \"Form\" clashes with auto-imported one)\r\n\r\nIt would be awesome if `addComponent` utility could function in the same way as `addImports`, so maybe something like:\r\n```ts\r\n// Import component \"Form\" from \"vee-validate\" and rename it to \"VeeForm\"\r\naddComponent({\r\n name: 'Form',\r\n as: 'VeeForm',\r\n filePath: 'vee-validate',\r\n})\r\n```\r\n\r\nThere might be a way to do this via `components:extend` hook, but that seems convoluted and very counter-intuitive\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2903,2905],{"name":2886,"color":2904},"8DEF37",{"name":2906,"color":2907},"discussion","538de2",15153,"feat(kit): allowing renaming components with `addComponent`","2024-06-30T11:10:07Z","https://github.com/nuxt/nuxt/issues/15153",0.7496682,{"description":2914,"labels":2915,"number":2916,"owner":2867,"repository":2868,"state":2917,"title":2918,"updated_at":2919,"url":2920,"score":2921},"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,"closed","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.65292174,{"description":2923,"labels":2924,"number":104,"owner":2867,"repository":2868,"state":2917,"title":2926,"updated_at":2927,"url":2928,"score":2929},"I know `\u003CIcon>` is much sexier than `\u003CNuxtIcon>` or `\u003CNIcon>` but maybe in order to avoid conflicting we can prefix component name too?",[2925],{"name":2886,"color":2887},"Using two part component name","2022-09-07T13:21:28Z","https://github.com/nuxt/icon/issues/3",0.6819992,{"description":2931,"labels":2932,"number":2933,"owner":2867,"repository":2868,"state":2917,"title":2934,"updated_at":2935,"url":2936,"score":2937},"It might be a good idea to call the \u003CIcon.../> 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,"Suggestion: Icon -> NuxtIcon or BaseIcon","2023-03-14T21:38:49Z","https://github.com/nuxt/icon/issues/58",0.6828598,{"description":2939,"labels":2940,"number":2001,"owner":2867,"repository":2941,"state":2917,"title":2942,"updated_at":2943,"url":2944,"score":2873},"https://vercel.com/account/login-connections\n\n",[],"nuxt.com","Login connections page `/account/login-connections`","2023-02-15T12:31:40Z","https://github.com/nuxt/nuxt.com/issues/39",{"description":2946,"labels":2947,"number":2954,"owner":2867,"repository":2867,"state":2917,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: modules, build, tailwindcss\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.10.1\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n[stackblitz](https://stackblitz.com/edit/nuxt-starter-ndjt4o?file=components%2Fcard%2Fvariant%2Findex.vue)\n\n### Describe the bug\n\nAt a certain point I was no longer able to run one of my projects (presumably after an npm install).\r\n\r\nI have no errors but only the following warning:\r\n```\r\n[Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.\r\nComponent that was made reactive: { title: 'Product 1', to: '/product/product-01' }\r\n```\r\n\r\nI noticed that by modifying the name of the prop in `components/card/variats/index.vue ` from `btn` to something else everything seems to work fine again, for example, \r\nfrom:\r\n\r\n```\r\n\u003Cbtn :title=\"btn.title\" :to=\"btn.to\">\r\n \u003Cdiv>\r\n \u003Cp>TITLE: {{ btn.title }}\u003C/p>\r\n \u003Cp>LINK: {{ btn.to }}\u003C/p>\r\n \u003C/div>\r\n\u003C/btn>\r\n``` \r\n\r\nto:\r\n```\r\n\u003Cbtn :title=\"btnData.title\" :to=\"btnData.to\">\r\n \u003Cdiv>\r\n \u003Cp>TITLE: {{ btnData.title }}\u003C/p>\r\n \u003Cp>LINK: {{ btnData.to }}\u003C/p>\r\n \u003C/div>\r\n\u003C/btn>\r\n``` \r\n\r\nAs you can see, both the prop and the component have the same \"btn\" name, but this never created errors and worked until a few days ago.\r\n\r\nCan anyone help me?\r\nThanks,\r\nMatteo\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2948,2951],{"name":2949,"color":2950},"3.x","29bc7f",{"name":2952,"color":2953},"pending triage","E99695",24712,"Issue when a prop and a component have the same name","2023-12-12T21:36:32Z","https://github.com/nuxt/nuxt/issues/24712",0.72589976,["Reactive",2960],{},["Set"],["ShallowReactive",2963],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fT9CV3QqdExfPnBPxlXHudGbLSxSrKRPxAIoM2gHBmnU":-1},"/nuxt/icon/51"]