\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?",[3038],{"name":3039,"color":3040},"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":3047,"labels":3048,"number":1498,"owner":3021,"repository":3022,"state":3023,"title":3049,"updated_at":3050,"url":3051,"score":3052},"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":3054,"labels":3055,"number":3061,"owner":3021,"repository":3021,"state":3023,"title":3062,"updated_at":3063,"url":3064,"score":3065},"### 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).",[3056,3058],{"name":3039,"color":3057},"8DEF37",{"name":3059,"color":3060},"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":3067,"labels":3068,"number":3069,"owner":3021,"repository":3022,"state":3070,"title":3071,"updated_at":3072,"url":3073,"score":3074},"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":3076,"labels":3077,"number":3078,"owner":3021,"repository":3022,"state":3070,"title":3079,"updated_at":3080,"url":3081,"score":3082},"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.6558389,{"description":3084,"labels":3085,"number":104,"owner":3021,"repository":3022,"state":3070,"title":3087,"updated_at":3088,"url":3089,"score":3090},"I know `\u003CIcon>` is much sexier than `\u003CNuxtIcon>` or `\u003CNIcon>` but maybe in order to avoid conflicting we can prefix component name too?",[3086],{"name":3039,"color":3040},"Using two part component name","2022-09-07T13:21:28Z","https://github.com/nuxt/icon/issues/3",0.6819992,{"description":3092,"labels":3093,"number":3094,"owner":3021,"repository":3022,"state":3070,"title":3095,"updated_at":3096,"url":3097,"score":3098},"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":3100,"labels":3101,"number":3020,"owner":3021,"repository":3102,"state":3070,"title":3103,"updated_at":3104,"url":3105,"score":3027},"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",["Reactive",3107],{},["Set"],["ShallowReactive",3110],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fT9CV3QqdExfPnBPxlXHudGbLSxSrKRPxAIoM2gHBmnU":-1},"/nuxt/icon/51"]