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,"nuxt","icon","open","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.5985223,{"description":3160,"labels":3161,"number":932,"owner":3152,"repository":3153,"state":3154,"title":3162,"updated_at":3163,"url":3164,"score":3165},"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.67589545,{"description":3167,"labels":3168,"number":3175,"owner":3152,"repository":3176,"state":3154,"title":3177,"updated_at":3178,"url":3179,"score":3180},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.0\n- CLI Version: 3.13.1\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.4.1\n- Builder: -\n- User Config: colorMode, modules, devtools, ssr, runtimeConfig, vite, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.12.3, @nuxt/eslint@1.4.1\n- Build Modules: -\n\n\n\n### Version\n\nv2.12.3 (and Documentation Page)\n\n### Reproduction\n\nhttps://ui2.nuxt.com/components/input#icon\n\norange: color is applied to the icon\n\u003Cimg width=\"344\" height=\"137\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/60671830-8cf2-408e-a11f-30966cad4602\" />\n\n\namber: not applied\n\u003Cimg width=\"435\" height=\"134\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b9cffe65-9d2a-41f2-8e9d-b0dcb17ac4f4\" />\n\n### Description\n\n### Describe the bug\n\nWhen using `UInput`, the `color` prop sometimes fails to apply to the icon (`leading-icon` or `trailing-icon`). Specifically, if the color value is lexicographically *before* `\"gray\"` (e.g., `\"blue\"`), the icon appears with the `gray` color instead. If the color value is after `\"gray\"` (e.g., `\"red\"`, `\"teal\"`), it works correctly.\n\n### Expected behavior\n\nThe icon color should follow the specified `color` prop regardless of its string value.\n\n### Actual behavior\n\nFor certain colors (like `\"blue\"`), the icon appears with `gray` color instead of the specified color.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3169,3172],{"name":3170,"color":3171},"bug","d73a4a",{"name":3173,"color":3174},"triage","ffffff",4525,"ui","color prop on UInput does not apply to icon in some cases","2025-07-14T10:36:41Z","https://github.com/nuxt/ui/issues/4525",0.746839,{"description":3182,"labels":3183,"number":3184,"owner":3152,"repository":3153,"state":3154,"title":3185,"updated_at":3186,"url":3187,"score":3188},"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.75425637,{"description":3190,"labels":3191,"number":3192,"owner":3152,"repository":3153,"state":3193,"title":3194,"updated_at":3195,"url":3196,"score":3197},"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,"closed","fill propery is breaking SVGs","2024-08-28T10:17:14Z","https://github.com/nuxt/icon/issues/106",0.6798836,{"description":3199,"labels":3200,"number":3201,"owner":3152,"repository":3153,"state":3193,"title":3202,"updated_at":3203,"url":3204,"score":3205},"`\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.70120215,{"description":3207,"labels":3208,"number":3216,"owner":3152,"repository":3176,"state":3193,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### 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_",[3209,3210,3211,3214],{"name":3170,"color":3171},{"name":3173,"color":3174},{"name":3212,"color":3213},"closed-by-bot","ededed",{"name":3215,"color":3213},"stale",2013,"UToggle Color attribute not connected to off Icon","2025-06-19T02:12:11Z","https://github.com/nuxt/ui/issues/2013",0.725891,{"labels":3222,"number":3232,"owner":3152,"repository":3152,"state":3193,"title":3233,"updated_at":3234,"url":3235,"score":3236},[3223,3226,3229],{"name":3224,"color":3225},"enhancement","8DEF37",{"name":3227,"color":3228},"good first issue","fbca04",{"name":3230,"color":3231},"2.x","d4c5f9",6397,"Change banner color","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6397",0.7383122,{"description":3238,"labels":3239,"number":3247,"owner":3152,"repository":3152,"state":3193,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v21.6.2`\r\n- Nuxt Version: `3.11.1`\r\n- CLI Version: `3.11.1`\r\n- Nitro Version: `2.9.5`\r\n- Package Manager: `yarn@1.22.21`\r\n- Builder: `-`\r\n- User Config: `devtools`, `typescript`, `srcDir`, `modules`, `i18n`, `app`, `runtimeConfig`\r\n- Runtime Modules: `@nuxtjs/i18n@8.2.0`, `@pinia/nuxt@0.5.1`, `@vee-validate/nuxt@4.12.6`, `@nuxtjs/color-mode@3.3.3`, `@nuxt/image@1.4.0`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\n```ts\r\nconst colorMode = useColorMode();\r\nuseHead({\r\n bodyAttrs: {\r\n class: computed(() => {\r\n if(colorMode.value=== 'light'){\r\n return \"bg-fixed\"\r\n }else if(colorMode.value===\"dark\"){\r\n return \"bg-fixed dark-layout\"\r\n }\r\n return \"\"\r\n }),\r\n style: computed(() => {\r\n if(colorMode.value=== 'light'){\r\n return \"background-image: url(/assets/img/shape/banner-1.jpg)\"\r\n }else if(colorMode.value===\"dark\"){\r\n return \"background-image: url(/assets/img/shape/banner-2.jpg)\"\r\n }\r\n return \"\"\r\n })\r\n\r\n },\r\n}) ;\r\n```\r\n\r\n\r\n### Describe the bug\r\n\r\nAfter updating to nuxt 3.11.1, the background image does not change when the theme changes.\r\n\r\n\r\n\r\n### Additional context\r\n\r\nI use **@nuxtjs/color-mode**\r\n\r\n### Logs\r\n\r\n_No response_",[3240,3241,3244],{"name":3170,"color":3171},{"name":3242,"color":3243},"upstream","E8A36D",{"name":3245,"color":3246},"🔨 p3-minor","FBCA04",26586,"Body style background image does not update when theme changes","2024-07-01T06:31:38Z","https://github.com/nuxt/nuxt/issues/26586",0.7399929,{"description":3253,"labels":3254,"number":3260,"owner":3152,"repository":3176,"state":3193,"title":3261,"updated_at":3262,"url":3263,"score":3264},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: devtools, modules, runtimeConfig, app, css, ui, icon, i18n, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.1.0, @nuxt/eslint@1.3.0, @nuxtjs/device@3.2.4, @nuxtjs/i18n@9.5.3, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.1.0, nuxt-lodash@2.5.3\n- Build Modules: -\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/vigorous-cerf-pnrc3g\n\n// app.config.ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'emerald',\n neutral: 'zinc',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n green: 'green',\n blue: 'blue',\n purple: 'purple',\n gray: 'gray',\n },\n }\n}\n\n// nuxt.config.ts\n\nui: {\n theme: {\n colors: [ 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray' ],\n },\n },\n\n### Description\n\nYesterday everything was working fine, no code was changed, after the upgrade it broke.\nFor example:\n```html\n\u003Cdiv class=\"bg-(--ui-orange)\">\n```\nOr\n```html\n\u003Cdiv class=\"bg-orange\">\n```\nBoth not work\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3255,3256,3259],{"name":3170,"color":3171},{"name":3257,"color":3258},"v3","49DCB8",{"name":3173,"color":3174},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.7422162,["Reactive",3266],{},["Set"],["ShallowReactive",3269],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZhBuk-QGi1fjklulDkCpQm016Cru5UPz88Wilx0oDhw":-1},"/nuxt/icon/415"]