\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?",[3153],{"name":3154,"color":3155},"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.749341,{"description":3162,"labels":3163,"number":3164,"owner":3135,"repository":3136,"state":3165,"title":3166,"updated_at":3167,"url":3168,"score":3169},"I have tried every method such as add \u003Cfill=\"XXX\">\u003Ccolor=\"XXX\"> in css code globally,add code \"fill= currentcolor\" in svg,add file\"app.config.ts\",but the icon color no change in black .\nI use local icons, and this situation will not occur with non-local icons.\nCan anyone tell me what causes this?\nThe version of Nuxt-Icon is v1.15.0 (latest).",[],415,"closed","Why my Nuxt-Icon color cannot able to change color?","2025-07-19T01:13:30Z","https://github.com/nuxt/icon/issues/415",0.60744613,{"description":3171,"labels":3172,"number":3173,"owner":3135,"repository":3136,"state":3165,"title":3174,"updated_at":3175,"url":3176,"score":3177},"The following code snippet from nuxt-icon.svg is breaking SVG by rendering them all black.\r\n\r\n`&.nuxt-icon--fill, \r\n&.nuxt-icon--fill * { \r\n fill: currentColor; \r\n}`\r\n\r\nThe following bug is happening when using svg with nuxt-svgo module. For some reason, some of the svg get the class nuxt-icon--fill attach to them even though they are not rendered using nuxt-icon.",[],106,"fill propery is breaking SVGs","2024-08-28T10:17:14Z","https://github.com/nuxt/icon/issues/106",0.67553157,{"description":3179,"labels":3180,"number":3181,"owner":3135,"repository":3136,"state":3165,"title":3182,"updated_at":3183,"url":3184,"score":3185},"`\u003CIcon name=\"uil:github\" color=\"red\" />`\r\nreturns\r\n\r\n**App.config.ts**\r\n```\r\n// https://github.com/nuxt-modules/icon#configuration-%EF%B8%8F\r\nexport default defineAppConfig({\r\n icon: {\r\n size: \"300%\", // default \u003CIcon> size applied\r\n class: \"icon\", // default \u003CIcon> class applied\r\n mode: \"css\", // svg || css\r\n aliases: {\r\n nuxt: \"logos:nuxt-icon\",\r\n },\r\n },\r\n})\r\n```\r\n",[],176,"Add universal support for color attribute (similar to CSS icons)","2024-07-15T16:06:31Z","https://github.com/nuxt/icon/issues/176",0.6959693,{"description":3187,"labels":3188,"number":3189,"owner":3135,"repository":3136,"state":3165,"title":3190,"updated_at":3191,"url":3192,"score":3193},"Following the steps in the document, I expected to use the Icon component to display a custom SVG Icon, but it failed.\r\n\r\nhttps://stackblitz.com/edit/nuxt-icon-playground-t9ezmw?file=app.vue",[],162,"Custom Local Collections invalid","2024-06-12T02:55:17Z","https://github.com/nuxt/icon/issues/162",0.7215758,{"description":3195,"labels":3196,"number":3208,"owner":3135,"repository":3209,"state":3165,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.4\r\n- Builder: -\r\n- User Config: devtools, app, nitro, runtimeConfig, modules, svgoOptions, security, routeRules, vercel, colorMode, ui, i18n, maxDuration \r\n- Runtime Modules: nuxt-security@1.3.2, nuxt-svgo@4.0.2, @nuxt/ui@2.18.3, nuxt-zod-i18n@1.9.0, @nuxtjs/i18n@8.3.3, @nuxt/icon@1.4.4\r\n- Build Modules: -\n\n### Version\n\n2.18.3\n\n### Reproduction\n\n- no need\n\n### Description\n\nthe color attribute is not connected by any mean to the off state icon. even if you change the off state in `nuxt.config.ts` `ui` config to: \r\n```js \r\n ui:{\r\n toggle:{\r\n icon:{\r\n off:'text-{color}-400 dark:text-{color}-500'\r\n },\r\n default:{\r\n color: '{color ? color: primary}'\r\n }\r\n }\r\n },\r\n ```\r\nit will still be applying this to the \"on\" icon and not the off one, which is useless\r\n\r\ncurrent solution is to add your class in the off icon as such:\r\n\r\n```js\r\n \u003CUToggle\r\n on-icon=\"i-mingcute:moon-stars-fill\"\r\n off-icon=\"i-material-symbols:clear-day-rounded text-yellow-500\"\r\n v-model=enabled\r\n >\u003C/UToggle>\r\n```\r\n\r\nSuggestions: \r\n* connect to color attribute to both icons so it can be done like this: \r\n```js\r\n \u003CUToggle\r\n on-icon=\"i-mingcute:moon-stars-fill\"\r\n off-icon=\"i-material-symbols:clear-day-rounded\"\r\n :class=\"enabled ? 'bg-black fill-gray-50' : 'bg-orange-50'\"\r\n :color=\"enabled ? 'red' : 'yellow'\"\r\n v-model=enabled\r\n >\u003C/UToggle>\r\n```\r\n* or just add another one\r\n\r\n\r\nOn a side note: \r\nthere should be a place to edit the circle as well at least the color, preferably the ability to just add classes\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3197,3200,3203,3206],{"name":3198,"color":3199},"bug","d73a4a",{"name":3201,"color":3202},"triage","ffffff",{"name":3204,"color":3205},"closed-by-bot","ededed",{"name":3207,"color":3205},"stale",2013,"ui","UToggle Color attribute not connected to off Icon","2025-06-19T02:12:11Z","https://github.com/nuxt/ui/issues/2013",0.7226158,{"description":3215,"labels":3216,"number":3217,"owner":3135,"repository":3136,"state":3165,"title":3218,"updated_at":3219,"url":3220,"score":3221},"So in my case in nuxt.config.ts i described custom collection \r\nicon: {\r\n customCollections: [\r\n {\r\n prefix: 'elfi',\r\n dir: './assets/icons'\r\n },\r\n ],\r\n}\r\n\r\nif in my directory lies files with EN names - all works fine\r\nif i put there file with cyrillic (for ex RU) name - the nuxt even can't start properly with \"npm run dev\" - blank screen with no errors\r\n\r\nand one else thing - if i make some changes in folder with icons - i need to terminate nuxt and run again \"npm run dev\" to activate changes",[],201,"Seems like @nuxt/icon doesn't understand other language in files name in local icon collection","2024-07-16T20:38:16Z","https://github.com/nuxt/icon/issues/201",0.7247022,{"description":3223,"labels":3224,"number":3217,"owner":3135,"repository":3226,"state":3165,"title":3227,"updated_at":3228,"url":3229,"score":3221},"### 🆒 Your use case\r\n\r\nI would love to use the `ScriptGoogleMaps` component but I dont like the static placeholder. Instead I would like to immediately display the map.\r\n\r\n### 🆕 The solution you'd like\r\n\r\nAdd a prop to disable the placeholder / static map feature entirely.\r\n\r\n### ℹ️ Additional info\r\n\r\nReasons:\r\n- Static Map has a max resolution that is very low and therefor always looks blurry on high dpi screens\r\n- Static Map cant be [styled](https://snazzymaps.com/)\r\n- It takes some time until the scripts are loaded and the map is initialized. Therefor the \"activate map on hover\" doesnt work from a UX perspective",[3225],{"name":3154,"color":3155},"scripts","Google Maps: Add option to disabled placeholder","2024-09-03T15:45:42Z","https://github.com/nuxt/scripts/issues/201",["Reactive",3231],{},["Set"],["ShallowReactive",3234],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJFUKD6QWYady_51cK859U7cJXv-RkOtlv2oF9LfZXEQ":-1},"/nuxt/icon/423"]