\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?",[2003],{"name":2004,"color":2005},"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.7329606,{"description":2012,"labels":2013,"number":2014,"owner":1985,"repository":1986,"state":1987,"title":2015,"updated_at":2016,"url":2017,"score":2018},"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",[],129,"Unexpected behaviour when using an Icon within ClientOnly fallback","2023-12-18T12:08:48Z","https://github.com/nuxt/icon/issues/129",0.7395735,{"description":2020,"labels":2021,"number":2027,"owner":1985,"repository":1985,"state":1987,"title":2028,"updated_at":2029,"url":2030,"score":2031},"### 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).",[2022,2024],{"name":2004,"color":2023},"8DEF37",{"name":2025,"color":2026},"discussion","538de2",15153,"feat(kit): allowing renaming components with `addComponent`","2024-06-30T11:10:07Z","https://github.com/nuxt/nuxt/issues/15153",0.74411446,{"description":2033,"labels":2034,"number":2035,"owner":1985,"repository":1986,"state":2036,"title":2037,"updated_at":2038,"url":2039,"score":2040},"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.64032036,{"description":2042,"labels":2043,"number":551,"owner":1985,"repository":1986,"state":2036,"title":2045,"updated_at":2046,"url":2047,"score":2048},"I know `\u003CIcon>` is much sexier than `\u003CNuxtIcon>` or `\u003CNIcon>` but maybe in order to avoid conflicting we can prefix component name too?",[2044],{"name":2004,"color":2005},"Using two part component name","2022-09-07T13:21:28Z","https://github.com/nuxt/icon/issues/3",0.6878396,{"description":2050,"labels":2051,"number":2052,"owner":1985,"repository":1986,"state":2036,"title":2053,"updated_at":2054,"url":2055,"score":2056},"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.6923328,{"description":2058,"labels":2059,"number":1984,"owner":1985,"repository":2060,"state":2036,"title":2061,"updated_at":2062,"url":2063,"score":1991},"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":2065,"labels":2066,"number":2073,"owner":1985,"repository":1985,"state":2036,"title":2074,"updated_at":2075,"url":2076,"score":2077},"### 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_",[2067,2070],{"name":2068,"color":2069},"3.x","29bc7f",{"name":2071,"color":2072},"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.7251335,["Reactive",2079],{},["Set"],["ShallowReactive",2082],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"T9CV3QqdExfPnBPxlXHudGbLSxSrKRPxAIoM2gHBmnU":-1},"/nuxt/icon/51"]