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.7125554,{"description":3143,"labels":3144,"number":3151,"owner":3135,"repository":3152,"state":3137,"title":3153,"updated_at":3154,"url":3155,"score":3156},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v24.6.0`\n- Nuxt Version: `3.16.2`\n- CLI Version: `3.26.4`\n- Nitro Version: `2.12.4`\n- Package Manager: `npm@11.5.1`\n- Builder: `-`\n- User Config: `modules`, `devtools`, `app`, `css`, `colorMode`, `ui`, `runtimeConfig`, `alias`, `routeRules`, `sourcemap`, `devServer`, `future`, `compatibilityDate`, `nitro`, `eslint`, `fileStorage`, `fonts`, `googleTranslate`, `gtag`, `i18n`, `icon`, `image`, `security`, `stripe`, `svgo`, `tiptap`\n- Runtime Modules: `nuxt-auth-utils@0.5.17`, `@pinia/nuxt@0.10.1`, `nuxt-svgo@4.0.16`, `@nuxtjs/i18n@9.3.4`, `nuxt-authorization@0.3.4`, `nuxt-file-storage@0.3.0`, `@nuxt/fonts@0.11.0`, `@nuxt/image@1.10.0`, `@nuxt/ui@3.3.0`, `@nuxt/content@3.4.0`, `nuxt-security@2.2.0`, `nuxt-tiptap-editor@2.1.4`, `nuxt-google-translate@1.3.3`, `@unlok-co/nuxt-stripe@5.0.0`, `@nuxt/eslint@1.3.1`, `nuxt-gtag@3.0.3`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\n3.16.2\n\n### Reproduction\n\n-\n\n### Description\n\nIf you run nuxt dev you will see in console the message \"nuxt 4 coimpatibility mode enabled\" , in browser you will see the nuxt 4 logo instead of nuxt 3 and it will crash with\n\n500\n[GET] \"http://127.0.0.1:443/__nuxt_vite_node__/manifest\": fetch failed\n\nprobably some dependency related with vite and nuxt has been updated\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3145,3148],{"name":3146,"color":3147},"bug","d73a4a",{"name":3149,"color":3150},"triage","ffffff",4844,"ui","from 3.3.0 version 4 of nuxt is \"forced\"","2025-08-29T10:54:57Z","https://github.com/nuxt/ui/issues/4844",0.72732407,{"description":3158,"labels":3159,"number":3165,"owner":3135,"repository":3152,"state":3166,"title":3167,"updated_at":3168,"url":3169,"score":3170},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.15.0`\n- Nuxt Version: `3.17.5`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `devtools`, `experimental`, `modules`, `css`, `compatibilityDate`, `runtimeConfig`, `fonts`, `i18n`, `ui`\n- Runtime Modules: `@pinia/nuxt@0.5.5`, `@nuxt/eslint@0.5.7`, `@nuxt/ui@3.1.3`, `@nuxtjs/i18n@9.5.5`, `nuxt-marquee@1.0.4`, `nuxt-swiper@2.0.1`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/gallant-wiles-gm3tvp\n\n### Description\n\nCannot customize active style of dot of `UCarousel`. Adding `data-[state=active]` (`:ui=\"{ dot: 'data-[state=active]:bg-red=500' }\"`) is not working because there is no `data-state` attribute on dots.\n\n\u003Cimg width=\"487\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2adf8cef-bfdf-4041-be69-2215d3a32b23\" />\n\n### Additional context\n\n I pulled nuxtui and ran and checked playground carousel - dot buttons have `data-state` attribute tho.\n\n### Logs\n\n```shell-script\n\n```",[3160,3161,3164],{"name":3146,"color":3147},{"name":3162,"color":3163},"v3","49DCB8",{"name":3149,"color":3150},4312,"closed","Can't customize active state of UCarousel dot","2025-06-08T19:55:49Z","https://github.com/nuxt/ui/issues/4312",0.6994133,{"description":3172,"labels":3173,"number":3180,"owner":3135,"repository":3152,"state":3166,"title":3181,"updated_at":3182,"url":3183,"score":3184},"### Environment\n\n- Operating System: \"linux/ubuntu 24.04\"\n- Node Version: \"22.15.1\"\n- Nuxt Version: \"3.17.6\"\n- Package Manager: \"10.9.2\"\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.6\n\n### Reproduction\n\nhttps://github.com/pbartyla/nuxt_color_mode_bug\n\n### Description\n\nWhen using [useColorMode](https://ui.nuxt.com/getting-started/color-mode/nuxt), if a user manually selects a theme mode (light or dark) that differs from their system preference, and then refreshes the page, the stored mode is correctly applied, and isDark returns the expected value immediately.\n\nHowever, UI elements that rely on isDark for conditional rendering (e.g., toggling an icon) do not update on initial load. The component renders with an incorrect icon, despite isDark being correct.\n\n1. Visit a Nuxt UI page using useColorMode and a toggle button like:\n\n`\u003CUButton :icon=\"isDark ? 'i-lucide-moon' : 'i-lucide-sun'\" color=\"neutral\" variant=\"ghost\"`\n\n2. Manually toggle to \"dark\" mode (while system is set to \"light\").\n\n3. Refresh the page.\n\n4. isDark is true, the theme is applied as dark — but the icon still shows as \"moon\" (suggesting light mode).\n\nExpected behavior:\n\nSince isDark is correct immediately, the icon should render correctly ('sun' in dark mode). It seems like the initial render uses stale/default data or runs before the reactive state is fully respected by the component.\n\n### Additional context\n\nManually toggling the mode after page load causes the icon to update correctly.\n\nLikely related to hydration or timing of when isDark is reactive in relation to rendering the component.\n\nVideo recording of the issue is available for reference — showing the incorrect icon on initial page load despite the correct theme and isDark value.\n\nhttps://github.com/user-attachments/assets/8c2bac86-f7f9-4bc0-8e11-64d107c60a18\n\n\n### Logs\n\n```shell-script\n\n```",[3174,3175,3176,3177],{"name":3146,"color":3147},{"name":3162,"color":3163},{"name":3149,"color":3150},{"name":3178,"color":3179},"stale","ededed",4459,"useColorMode does not respect storage value on initial load (icon mismatch)","2025-09-07T15:11:52Z","https://github.com/nuxt/ui/issues/4459",0.7190312,{"description":3186,"labels":3187,"number":3193,"owner":3135,"repository":3152,"state":3166,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.21.1`\n- Nitro Version: `2.10.4`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `devtools`, `extends`, `runtimeConfig`, `css`, `build`, `modules`, `piniaPluginPersistedstate`, `googleFonts`, `colorMode`, `site`, `robots`, `gtag`, `routeRules`, `icon`, `compatibilityDate`\n- Runtime Modules: `@nuxtjs/google-fonts@3.2.0`, `@nuxt/eslint@1.0.1`, `@vueuse/nuxt@12.7.0`, `@pinia/nuxt@0.10.1`, `pinia-plugin-persistedstate/nuxt@4.2.0`, `@nuxt/image@1.9.0`, `@nuxt/ui@2.21.0`, `nuxt-gtag@3.0.2`, `@nuxtjs/robots@5.2.2`, `@nuxtjs/sitemap@7.2.5`, `@nuxt/content@3.1.1`, `@nuxt/icon@1.10.3`\n- Build Modules: `-`\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.15.4\n\n### Reproduction\n\nI don't know how to reproduce this since it works in my local environment, however, this is the website: https://www.storysprout.me/\n\nI did try adding:\n```ts\n icon: {\n clientBundle: {\n scan: true,\n }\n },\n```\nto the `nuxt.config.ts` file, but that didn't help.\n\nI also installed the packages for the icons:\n\n```json\n \"dependencies\": {\n \"@iconify-json/fluent-emoji-high-contrast\": \"^1.2.3\",\n \"@iconify-json/heroicons\": \"^1.2.2\",\n }\n```\n\n### Description\n\nHi, \n\nSince I deployed to Vercel yesterday, I have encountered issues with the icons on my website.\n\nSome of them load correctly, while others do not work at all. I get a few console and network errors when loading the icons.\n\nFor example, I am using the component `UColorModeButton` and then I see this error:\n```\n[Icon] failed to load icon `heroicons:moon-20-solid`\n```\n\nIt happens similarly with other icons I have added for example when using the `items` prop to some of the other components like `UDropDown`.\n\nThe Network Error is a 404 on:\n`https://www.storysprout.me/api/_nuxt_icon/heroicons.json?icons=moon-20-solid`\n\nThank you!\n\n### Additional context\n\nI can provide any additional context if necessary.\n\n### Logs\n\n```shell-script\n\n```",[3188,3189,3190],{"name":3146,"color":3147},{"name":3162,"color":3163},{"name":3191,"color":3192},"upstream","78bddb",3347,"failed to load icon `heroicons:moon-20-solid` on Vercel deployment","2025-08-07T11:29:01Z","https://github.com/nuxt/ui/issues/3347",0.71952903,{"description":3199,"labels":3200,"number":3201,"owner":3135,"repository":3136,"state":3166,"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.7196459,{"description":3207,"labels":3208,"number":3212,"owner":3135,"repository":3152,"state":3166,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### 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```",[3209,3210,3211],{"name":3146,"color":3147},{"name":3162,"color":3163},{"name":3149,"color":3150},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.7205476,{"description":3218,"labels":3219,"number":3220,"owner":3135,"repository":3136,"state":3166,"title":3221,"updated_at":3222,"url":3223,"score":3224},"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,"Why my Nuxt-Icon color cannot able to change color?","2025-07-19T01:13:30Z","https://github.com/nuxt/icon/issues/415",0.72108006,{"description":3226,"labels":3227,"number":3232,"owner":3135,"repository":3152,"state":3166,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v18.18.2\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@9.8.1\r\n- Builder: -\r\n- User Config: extends, devtools, colorMode, modules, piniaPersistedstate, eslint\r\n- Runtime Modules: @nuxt/ui@2.16.0, @nuxt/eslint@0.3.12, @nuxtjs/device@3.1.1, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nv2.16.0\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-gaqntm?file=app.vue\r\n\r\n### Description\r\n\r\nI use a `pinia` store to save settings and `persist` those settings using `pinia-plugin-persistedstate` and `localStorage` as storage. Everything works great, `URadioGroup` and `URadio` are correctly updated when I refresh the page. But `UToggle` isn't, although the value of `modelValue` is correct when I print it on screen. \r\n\r\n- UToggle is not updated when v-model is set from pinia store\r\n- UToggle is correctly set when v-model is from local variable\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3228,3229,3231],{"name":3146,"color":3147},{"name":3230,"color":3179},"closed-by-bot",{"name":3178,"color":3179},1792,"UToggle is not getting rerendered when v-model is getting from pinia store","2025-06-19T02:12:32Z","https://github.com/nuxt/ui/issues/1792",0.722754,{"description":3238,"labels":3239,"number":3244,"owner":3135,"repository":3152,"state":3166,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3240,3241,3242,3243],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3230,"color":3179},{"name":3178,"color":3179},2860,"[UButton] Using a custom color on the link variant causes an error","2025-06-18T09:05:19Z","https://github.com/nuxt/ui/issues/2860",0.7318509,["Reactive",3250],{},["Set"],["ShallowReactive",3253],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fEvZTeg3fLE_eu7cA7gQACjOso9i8tDI9_l9FtCOvhXs":-1},"/nuxt/ui/2013"]