\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",[],"nuxt","icon","open","Unexpected behaviour when using an Icon within ClientOnly fallback","2023-12-18T12:08:48Z","https://github.com/nuxt/icon/issues/129",0.717122,{"description":2915,"labels":2916,"number":2917,"owner":2907,"repository":2908,"state":2909,"title":2918,"updated_at":2919,"url":2920,"score":2921},"Hello, how do I use the Rendering only visible icons feature of the Iconify web component? I'm using animated icons and want the animation to restart each time they enter the viewport\nhttps://iconify.design/docs/iconify-icon/#rendering-only-visible-icons",[],397,"How to use the Rendering only visible icons feature of the Iconify web component?","2025-05-19T00:30:06Z","https://github.com/nuxt/icon/issues/397",0.7320762,{"description":2923,"labels":2924,"number":2928,"owner":2907,"repository":2908,"state":2909,"title":2929,"updated_at":2930,"url":2931,"score":2932},"Hi there, thanks for the cool module.\r\n\r\nI was wondering if it is possible to nest custom SVG icons inside folders? \r\n\r\n**Editing OP to make it more clear:**\r\n\r\n--- \r\n\r\nAfter some experimenting with the playground in the repo I understand the intended pattern now.\r\n\r\n1. Default pattern\r\n\r\n```js\r\n// Assuming: `components/global/MyIcon.vue`\r\n\r\n\u003CIcon name=\"MyIcon\" /> \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?",[2925],{"name":2926,"color":2927},"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.75564027,{"description":2934,"labels":2935,"number":2936,"owner":2907,"repository":2908,"state":2909,"title":2937,"updated_at":2938,"url":2939,"score":2940},"I want to share common icons between projects using nuxt layers. I would prefer to keep my icons in svg files. Unfortunately, the `nuxt-icons` module does not meet my expectations (import all icons), so I decided to use your solution.\r\n\r\nWhen I hold the icon in `/components/global` everything works great. Unfortunately, when I keep this icon in a nuxt layer, I get a string with the name instead of the icon.\r\n\r\nI would also love to be able to use `param-case` in the `name` property.\r\n\r\nReproduction: https://stackblitz.com/edit/github-qddkmm?file=base/nuxt.config.ts",[],48,"Can't use svg icons from nuxt layer","2024-05-07T08:36:47Z","https://github.com/nuxt/icon/issues/48",0.76260984,{"description":2942,"labels":2943,"number":2944,"owner":2907,"repository":2908,"state":2945,"title":2946,"updated_at":2947,"url":2948,"score":2949},"\r\n\r\n\r\n\r\n",[],78,"closed","Excuse me, when v-for performs list rendering, the icon name will appear. May I ask what may be the problem. Thanks","2023-05-10T09:55:26Z","https://github.com/nuxt/icon/issues/78",0.72332156,{"description":2951,"labels":2952,"number":2959,"owner":2907,"repository":2907,"state":2945,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://github.com/agrajak/nuxt_text_recruit](https://github.com/agrajak/nuxt_text_recruit)\n\n### Steps to reproduce\n\nnuxt generate.\nmy static website is hosted in https://agrajak-8d93e.firebaseapp.com/\n\n\n### What is expected ?\n\nIn pages/index.vue, When I see my site with Chrome Developer Tools, Every \u003Cfont-awesome-icon> should be rendered to \u003Csvg ~~~> \n\n\n\n\n\n### What is actually happening?\n\nsome of \u003Cfont-awesome-icon> are rendered to \u003Csvg ~>(in .sticky-nav, you can see it when you scroll down) \nand the others are still rendered to \u003Cfont-awesome-icon> and also show nothing. (in top component)\n\n\n\n\n\n\n### Additional comments?\n\nSite works pretty well in nuxt start.\nI also checked turning off SSR options in nuxt.config.js\n\n {src: '~plugins/fullpage', ssr: false}\nand font-awesome librarys are declared in plugins/fullpage.js\n\nIf this issue is not a bug, just let me know how to fix it.\nthank you.\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7640\">#c7640\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2953,2956],{"name":2954,"color":2955},"pending triage","E99695",{"name":2957,"color":2958},"2.x","d4c5f9",3808,"nuxt generate doesn't render every components","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3808",0.7364228,{"description":2965,"labels":2966,"number":2968,"owner":2907,"repository":2907,"state":2945,"title":2969,"updated_at":2970,"url":2971,"score":2972},"I know this has been asked before but no matter what I try I can't seem to make it work. \r\nI want to use a component that will render my svg icons inline.\r\n\r\nThis is my nuxt.config.js\r\n```\r\nbuild: {\r\n /*\r\n ** Run ESLINT on save\r\n */\r\n extend (config, ctx) {\r\n if (ctx.isClient) {\r\n config.module.rules.push({\r\n enforce: 'pre',\r\n test: /\\.(js|vue)$/,\r\n loader: 'eslint-loader',\r\n exclude: /(node_modules)/\r\n },\r\n {\r\n test: /\\.svg$/,\r\n include: /assets\\/svg/,\r\n use: [\r\n {\r\n loader: 'svg-inline-loader'\r\n }\r\n ]\r\n },\r\n {\r\n test: /\\.(png|jpe?g|gif)$/,\r\n loader: 'url-loader',\r\n exclude: /assets\\/svg/,\r\n query: {\r\n limit: 1000, // 1KO\r\n name: 'img/[name].[hash:7].[ext]'\r\n }\r\n })\r\n }\r\n },\r\n }\r\n```\r\n\r\nand this is my component: \r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cspan :class=\"'icon-' + name\" class=\"icon\" v-html=\"url\">\u003C/span>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n export default {\r\n props: ['name'],\r\n computed: {\r\n url () {\r\n return require(`~/assets/svg/${this.name}.svg`)\r\n }\r\n }\r\n }\r\n\u003C/script>\r\n```\r\nAnd this is what gets rendered:\r\n\u003Cimg width=\"452\" alt=\"screenshot 2017-08-07 21 15 42\" src=\"https://user-images.githubusercontent.com/5978397/29042046-a2b7b058-7bb5-11e7-9ba9-e0d33b5e7016.png\">\r\n\r\n\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1165\">#c1165\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2967],{"name":2957,"color":2958},1315,"Can't make svg-inline-loader work","2023-01-18T15:41:02Z","https://github.com/nuxt/nuxt/issues/1315",0.7417262,{"description":2974,"labels":2975,"number":1855,"owner":2907,"repository":2908,"state":2945,"title":2976,"updated_at":2977,"url":2978,"score":2979},"I see that there are a few default styles added in this, which actually make the icons behave differently than it should. \r\nhttps://github.com/nuxt-modules/icon/blob/4ecfd3a4672505799aa040176da9bf737f6b5f9a/src/runtime/Icon.vue#LL56-L61C2\r\n\r\n```html\r\n\u003Cstyle scoped>\r\n.icon {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n\u003C/style>\r\n```\r\n",[],"Remove default styles and make it headless","2023-01-12T09:48:31Z","https://github.com/nuxt/icon/issues/24",0.7441483,{"description":2981,"labels":2982,"number":2992,"owner":2907,"repository":2993,"state":2945,"title":2994,"updated_at":2995,"url":2996,"score":2997},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/input#loading-icon\n\n### Description\n\nBoth icons, the one shown in the example `i-lucide-repeat-2` and the component's default prop, `i-lucide-refresh-cw` look bad when rotated. I think there's a lot of room for improvement, these icons aren't meant to be animated.\n\nLuckily, there are some Lucide icons which _are_ designed to be animated.\n\nHow about https://lucide.dev/icons/loader-circle?\n\nOr https://lucide.dev/icons/loader?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2983,2986,2989],{"name":2984,"color":2985},"bug","d73a4a",{"name":2987,"color":2988},"v3","49DCB8",{"name":2990,"color":2991},"triage","ffffff",4162,"ui","`Input`'s default loading icon needs improvement","2025-05-16T16:06:11Z","https://github.com/nuxt/ui/issues/4162",0.7531203,{"labels":2999,"number":3004,"owner":2907,"repository":2907,"state":2945,"title":3005,"updated_at":3006,"url":3007,"score":3008},[3000,3002,3003],{"name":3001,"color":2991},"stale",{"name":2954,"color":2955},{"name":2957,"color":2958},7175," Maximum call stack size exceeded","2023-01-22T15:34:50Z","https://github.com/nuxt/nuxt/issues/7175",0.75567496,["Reactive",3010],{},["Set"],["ShallowReactive",3013],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdmo-ToLMsVpvQMq-Nj03ICHJ3d7w1UuZGH3ZE7OHi0c":-1},"/nuxt/icon/8"]