\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?",[3163],{"name":3164,"color":3165},"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":3172,"labels":3173,"number":1510,"owner":3145,"repository":3146,"state":3147,"title":3174,"updated_at":3175,"url":3176,"score":3177},"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":3179,"labels":3180,"number":3181,"owner":3145,"repository":3146,"state":3182,"title":3183,"updated_at":3184,"url":3185,"score":3186},"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":3188,"labels":3189,"number":3190,"owner":3145,"repository":3146,"state":3182,"title":3191,"updated_at":3192,"url":3193,"score":3194},"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":3196,"labels":3197,"number":104,"owner":3145,"repository":3146,"state":3182,"title":3199,"updated_at":3200,"url":3201,"score":3202},"I know `\u003CIcon>` is much sexier than `\u003CNuxtIcon>` or `\u003CNIcon>` but maybe in order to avoid conflicting we can prefix component name too?",[3198],{"name":3164,"color":3165},"Using two part component name","2022-09-07T13:21:28Z","https://github.com/nuxt/icon/issues/3",0.6819992,{"description":3204,"labels":3205,"number":3206,"owner":3145,"repository":3146,"state":3182,"title":3207,"updated_at":3208,"url":3209,"score":3210},"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":3212,"labels":3213,"number":3221,"owner":3145,"repository":3222,"state":3182,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### 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_",[3214,3215,3218],{"name":3164,"color":3165},{"name":3216,"color":3217},"triage","ffffff",{"name":3219,"color":3220},"v4","49DCB8",4728,"ui","Allow passing components as icons instead of strings","2025-09-01T10:04:35Z","https://github.com/nuxt/ui/issues/4728",0.7022041,{"description":3228,"labels":3229,"number":1672,"owner":3145,"repository":3230,"state":3182,"title":3231,"updated_at":3232,"url":3233,"score":3151},"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",3235],{},["Set"],["ShallowReactive",3238],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fT9CV3QqdExfPnBPxlXHudGbLSxSrKRPxAIoM2gHBmnU":-1},"/nuxt/icon/51"]