\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?",[3139],{"name":3140,"color":3141},"enhancement","a2eeef",75,"nuxt","icon","open","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":3151,"labels":3152,"number":3154,"owner":3143,"repository":3155,"state":3145,"title":3156,"updated_at":3157,"url":3158,"score":3159},"### 🆒 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_",[3153],{"name":3140,"color":3141},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":3161,"labels":3162,"number":932,"owner":3143,"repository":3144,"state":3145,"title":3163,"updated_at":3164,"url":3165,"score":3166},"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",[],"Can't apply color to custom icons","2025-06-09T07:06:52Z","https://github.com/nuxt/icon/issues/402",0.71459967,{"description":3168,"labels":3169,"number":3170,"owner":3143,"repository":3144,"state":3145,"title":3171,"updated_at":3172,"url":3173,"score":3174},"My situation is summarized as follows:\n\nI've upgraded @nuxt/icon to 2.0.0, and the SVG file doesn't have a hard-coded fill.\nI'm using the \u003CIcon :name=\"icon:xxx\" /> method to call the local SVG.\nI'm using .icon { color: var(--neutral); } to control the color, but the icon is still always black.",[],423,"Custom icons cannot change color and the overlay svg color is still black","2025-08-23T07:09:20Z","https://github.com/nuxt/icon/issues/423",0.72013724,{"description":3176,"labels":3177,"number":3178,"owner":3143,"repository":3144,"state":3145,"title":3179,"updated_at":3180,"url":3181,"score":3182},"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.72819746,{"description":3184,"labels":3185,"number":3186,"owner":3143,"repository":3144,"state":3145,"title":3187,"updated_at":3188,"url":3189,"score":3190},"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":3192,"labels":3193,"number":3208,"owner":3143,"repository":3209,"state":3210,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Description\n\nHello.\n\nIs it possible to make a collection of local custom icons for Vue, as described in the documentation section for Nuxt?",[3194,3197,3200,3203,3206],{"name":3195,"color":3196},"question","d876e3",{"name":3198,"color":3199},"v3","49DCB8",{"name":3201,"color":3202},"vue","42b883",{"name":3204,"color":3205},"closed-by-bot","ededed",{"name":3207,"color":3205},"stale",4298,"ui","closed","Custom icon collection.","2025-08-20T02:08:20Z","https://github.com/nuxt/ui/issues/4298",0.66882956,{"description":3216,"labels":3217,"number":3218,"owner":3143,"repository":3144,"state":3210,"title":3219,"updated_at":3220,"url":3221,"score":3222},"https://stackblitz.com/edit/nuxt-icon-playground-ixa4jk?file=assets%2Fmy-icons%2Ffoo.svg,nuxt.config.ts,app.vue",[],171,"customCollections error","2024-07-18T22:46:21Z","https://github.com/nuxt/icon/issues/171",0.6701542,{"description":3224,"labels":3225,"number":3218,"owner":3143,"repository":3155,"state":3210,"title":3226,"updated_at":3227,"url":3228,"score":3222},"\r\n\r\ncc: @huang-julien ",[],"Google Analytics Logo is wrong","2024-07-21T09:49:37Z","https://github.com/nuxt/scripts/issues/171",{"description":3230,"labels":3231,"number":3232,"owner":3143,"repository":3144,"state":3210,"title":3233,"updated_at":3234,"url":3235,"score":3236},"\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,["Reactive",3238],{},["Set"],["ShallowReactive",3241],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpOu1kYS4zvU4Nvjnh8YXoDstfGRfM_NSqLF7gbJZ-4I":-1},"/nuxt/icon/162"]