\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?",[3035],{"name":3036,"color":3037},"enhancement","a2eeef",75,"icon","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.70137626,{"description":3045,"labels":3046,"number":3048,"owner":3025,"repository":3049,"state":3027,"title":3050,"updated_at":3051,"url":3052,"score":3053},"### 🆒 Your use case\n\nI beleive this is a Nuxt edge case for .env, but end user needs to specify an empty key for the .env override to do anything, i.e:\r\n\r\n```ts\r\nexport default defineNuxtConfig({\r\n scripts: {\r\n registry: {\r\n googleAnalytics: true,\r\n }\r\n },\r\n // you need to provide a runtime config to access the environment variables\r\n runtimeConfig: {\r\n public: {\r\n scripts: {\r\n googleAnalytics: {\r\n // .env\r\n // NUXT_PUBLIC_SCRIPTS_GOOGLE_ANALYTICS_ID=\u003Cyour-id>\r\n id: '',\r\n },\r\n },\r\n },\r\n },\r\n})\r\n```\r\n\r\n\n\n### 🆕 The solution you'd like\n\nWe should try and see if we can drop the need for this runtimeConfig as it's quite verbose.\r\n\n\n### 🔍 Alternatives you've considered\n\n_No response_\n\n### ℹ️ Additional info\n\n_No response_",[3047],{"name":3036,"color":3037},239,"scripts","Drop need to specify the runtime config when using .env","2024-09-03T15:49:47Z","https://github.com/nuxt/scripts/issues/239",0.7098881,{"description":3055,"labels":3056,"number":3057,"owner":3025,"repository":3039,"state":3027,"title":3058,"updated_at":3059,"url":3060,"score":3061},"I'm using icons library on Nuxt UI (still I don't know whose issue this is) for my Nuxt project which uses Tailwind v4 , and I set up some custom icons through a JSON file:\n\n```\n{\n \"icons\": {\n \"arrow-small-right\": {\n \"body\": \"\u003Cpath fill=\\\"currentColor\\\" d=...\n },\n \"auction\": {\n \"body\": \"\u003Cpath fill=\\\"currentColor\\\" d=...\n },\n...\n }\n}\n```\n\n```\n// nuxt.config.ts\n\nimport customIcons from './icons.json' with { type: 'json' };\n\n...\n\n icon: {\n customCollections: [{\n prefix: 'custom',\n icons: customIcons.icons,\n width: 512,\n height: 512,\n }],\n }\n```\n\n\nThey can be imported, however when I try to change their color like `text-white` or `fill-white`, it doesn't work.\n\nWhat I noticed is that icons imported from Iconify have important css rules such as `mask-*`, while mine don't.\nSo how am I supposed to inject these rules inside them, if there is a way?\n\np.s. sorry for creating my issue without completing it",[],402,"Can't apply color to custom icons","2025-06-09T07:06:52Z","https://github.com/nuxt/icon/issues/402",0.71459967,{"description":3063,"labels":3064,"number":1995,"owner":3025,"repository":3039,"state":3027,"title":3065,"updated_at":3066,"url":3067,"score":3068},"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",[],"Can't use svg icons from nuxt layer","2024-05-07T08:36:47Z","https://github.com/nuxt/icon/issues/48",0.72819746,{"description":3070,"labels":3071,"number":3072,"owner":3025,"repository":3039,"state":3027,"title":3073,"updated_at":3074,"url":3075,"score":3076},"My custom icon collection doesn't return more than 1 icon, If I call just `gmail` or `dot-circle`, it works, but it doesn't work for multiple icons, from the URL (http://localhost:3000/api/_nuxt_icon/custom.json?icons=dot-circle,gmail) I get the following JSON.\n\n```\n{\n \"prefix\":\"custom\",\n \"icons\":{\n \"dot-circle\":{\n \"width\":32,\n \"height\":33,\n \"body\":\"\u003Cg fill=\\\"none\\\">\u003Cpath opacity=\\\"0.2\\\" d=\\\"M16 28.8047C22.6274 28.8047 28 23.4321 28 16.8047C28 10.1773 22.6274 4.80469 16 4.80469C9.37258 4.80469 4 10.1773 4 16.8047C4 23.4321 9.37258 28.8047 16 28.8047Z\\\" fill=\\\"#D324FC\\\"/>\\n\u003Cpath d=\\\"M16 28.8047C22.6274 28.8047 28 23.4321 28 16.8047C28 10.1773 22.6274 4.80469 16 4.80469C9.37258 4.80469 4 10.1773 4 16.8047C4 23.4321 9.37258 28.8047 16 28.8047Z\\\" stroke=\\\"#D324FC\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"/>\\n\u003Ccircle cx=\\\"16\\\" cy=\\\"17\\\" r=\\\"3\\\" fill=\\\"#D324FC\\\"/>\u003C/g>\"\n }\n }\n}\n```",[],408,"Custom icon fails when calling multiple custom icons from the json url","2025-06-26T14:44:40Z","https://github.com/nuxt/icon/issues/408",0.7293805,{"description":3078,"labels":3079,"number":3080,"owner":3025,"repository":3039,"state":3081,"title":3082,"updated_at":3083,"url":3084,"score":3085},"https://stackblitz.com/edit/nuxt-icon-playground-ixa4jk?file=assets%2Fmy-icons%2Ffoo.svg,nuxt.config.ts,app.vue",[],171,"closed","customCollections error","2024-07-18T22:46:21Z","https://github.com/nuxt/icon/issues/171",0.6701542,{"description":3087,"labels":3088,"number":3080,"owner":3025,"repository":3049,"state":3081,"title":3089,"updated_at":3090,"url":3091,"score":3085},"\r\n\r\ncc: @huang-julien ",[],"Google Analytics Logo is wrong","2024-07-21T09:49:37Z","https://github.com/nuxt/scripts/issues/171",{"description":3093,"labels":3094,"number":3095,"owner":3025,"repository":3039,"state":3081,"title":3096,"updated_at":3097,"url":3098,"score":3099},"\r\nhttps://github.com/user-attachments/assets/a864645c-c0eb-4581-885e-effce6bc8ca9\r\nThis SVG file cannot be displayed\r\nBut using this module( https://nuxt.com.cn/modules/icons )Can display normally\r\n",[],242,"Some SVG cannot be displayed","2024-08-27T10:33:55Z","https://github.com/nuxt/icon/issues/242",0.6985164,{"description":3101,"labels":3102,"number":3048,"owner":3025,"repository":3039,"state":3081,"title":3103,"updated_at":3104,"url":3105,"score":3053},"Our server bundle size is massive caused by nuxt icon. i guess it is because it includes all our svgs files as custom collections.\r\nIs it possible to have custom collections with svg files that are located under the public folder so that they do not get part of the bundle size?\r\nHow would i need to configure this?\r\nAt the moment they cannot be loaded",[],"Custom Collection with svg files unter public folder?","2024-08-21T22:47:28Z","https://github.com/nuxt/icon/issues/239",["Reactive",3107],{},["Set"],["ShallowReactive",3110],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpOu1kYS4zvU4Nvjnh8YXoDstfGRfM_NSqLF7gbJZ-4I":-1},"/nuxt/icon/162"]