\n\n\u003Cimg width=\"912\" height=\"578\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/71fb37a4-3959-413f-9076-74f63eee0108\" />\n\nNormal button:\n```html\n\u003CUButton\n color=\"info\"\n variant=\"soft\"\n size=\"xl\"\n icon=\"i-heroicons-question-mark-circle\"\n class=\"rounded-full\"\n aria-label=\"Show keyboard shortcuts\"\n />\n```\n\nIm using Nuxt4 and NuxtUI 3",[],416,"nuxt","icon","open","NuxtUI icons forced to width and height 1em!","2025-07-22T16:50:58Z","https://github.com/nuxt/icon/issues/416",0.6849581,{"description":3027,"labels":3028,"number":3035,"owner":3019,"repository":3036,"state":3021,"title":3037,"updated_at":3038,"url":3039,"score":3040},"### 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```",[3029,3032],{"name":3030,"color":3031},"bug","d73a4a",{"name":3033,"color":3034},"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.70760924,{"description":3042,"labels":3043,"number":3044,"owner":3019,"repository":3020,"state":3021,"title":3045,"updated_at":3046,"url":3047,"score":3048},"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.70962733,{"description":3050,"labels":3051,"number":1995,"owner":3019,"repository":3020,"state":3021,"title":3052,"updated_at":3053,"url":3054,"score":3055},"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.72898376,{"description":3057,"labels":3058,"number":1442,"owner":3019,"repository":3020,"state":3059,"title":3060,"updated_at":3061,"url":3062,"score":3063},"Can update the Docs with color props.\r\n\r\n \u003C Icon name=\"uil:github\" size=\"50\" color=\"green\" />",[],"closed","Color Props should be added to documentation aswell","2023-02-03T13:05:57Z","https://github.com/nuxt/icon/issues/17",0.702282,{"description":3065,"labels":3066,"number":1442,"owner":3019,"repository":3067,"state":3059,"title":3068,"updated_at":3069,"url":3070,"score":3063},"",[],"nuxt.com","Team members page","2023-02-15T12:31:36Z","https://github.com/nuxt/nuxt.com/issues/17",{"description":3072,"labels":3073,"number":3074,"owner":3019,"repository":3020,"state":3059,"title":3075,"updated_at":3076,"url":3077,"score":3078},"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.70924556,{"description":3080,"labels":3081,"number":3088,"owner":3019,"repository":3036,"state":3059,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nTo simplify customization and ensure visual consistency across projects, it would be useful to add a configuration option to define `defaultVariants` globally or for specific component types. These variants could include default size, color, and variant properties for all components or specific ones like buttons, button groups, and form fields. \n\n### Proposal: \n1. Introduce a `defaultVariants` field in the Nuxt configuration to: \n - Define **global variants** (applied to all components). \n - Define **component-specific variants** (e.g., for buttons, forms, etc.). \n\n### Example Implementation: \nIn the Nuxt configuration file: \n```javascript\nexport default defineNuxtConfig({\n ui: {\n defaultVariants: {\n // Global variants\n global: {\n size: 'lg',\n color: 'neutral',\n },\n // Button and ButtonGroup variants\n button: {\n size: 'md',\n color: 'primary',\n variant: 'solid',\n },\n // Form input, select, … variants\n form: {\n size: 'lg',\n color: 'neutral',\n variant: 'outlined',\n },\n },\n },\n});\n``` \n\n### Usage: \nThe defined `defaultVariants` would automatically be applied to all components without the need to explicitly specify these props in templates. Props provided in the template would always take precedence over the ones defined in the configuration. \n\n### Benefits: \n- Reduces repetition in templates. \n- Enhances visual consistency across the project. \n- Flexibility to customize globally or per component type. \n- Easy adoption with prop priority management. \n\n### Expected Impact: \nThis feature would add flexibility while making the integration of `@nuxt/ui` faster and more intuitive by allowing consistent and customized variants to be managed at various levels of the project. \n\nThanks for your continued work on `@nuxt/ui`, which remains an essential tool for building modern and performant interfaces. \n\n### Additional context\n\n_No response_",[3082,3085],{"name":3083,"color":3084},"enhancement","a2eeef",{"name":3086,"color":3087},"v3","49DCB8",2934,"Add `defaultVariants` option to define global or component-specific size, variant, and color settings","2025-07-09T12:37:51Z","https://github.com/nuxt/ui/issues/2934",0.71338445,{"description":3094,"labels":3095,"number":3099,"owner":3019,"repository":3019,"state":3059,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.15.1\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: -\r\n- Package Manager: pnpm@9.5.0\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules, studio\r\n- Runtime Modules: @nuxt/ui@2.17.0, @nuxt/eslint@0.3.13, @nuxt/image@1.7.0, @nuxthub/core@0.7.1, @nuxt/content@2.13.2, @nuxthq/studio@2.0.3\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n``` nuxt.schema.ts\r\nimport { field, group } from \"@nuxthq/studio/theme\";\r\n\r\nexport default defineNuxtSchema({\r\n appConfig: {\r\n ui: group({\r\n title: \"UI Configuration\",\r\n description: \"Configure the UI elements of your site.\",\r\n icon: \"i-mdi-palette\",\r\n fields: {\r\n logo: field({\r\n type: \"media\",\r\n title: \"Logo\",\r\n description: \"The main logo for your website.\",\r\n icon: \"i-mdi-image\",\r\n }),\r\n primaryColor: field({\r\n type: \"string\",\r\n title: \"Primary Color\",\r\n description: \"The primary color for your website's theme.\",\r\n icon: \"i-mdi-palette\",\r\n default: \"#3B82F6\",\r\n }),\r\n backgroundColor: field({\r\n type: \"string\",\r\n title: \"Background Color\",\r\n description: \"The base/background color for your website.\",\r\n icon: \"i-mdi-format-color-fill\",\r\n default: \"#FFFFFF\",\r\n }),\r\n },\r\n }),\r\n seo: group({\r\n title: \"SEO\",\r\n description: \"SEO Configuration.\",\r\n icon: \"i-ph-app-window\",\r\n fields: {\r\n siteName: field({\r\n type: \"string\",\r\n title: \"Site Name\",\r\n description:\r\n \"Name used in ogSiteName and used as second part of your page title.\",\r\n icon: \"i-mdi-web\",\r\n }),\r\n siteDescription: field({\r\n type: \"string\",\r\n title: \"Site Description\",\r\n icon: \"i-ph-book-open-text\",\r\n description:\r\n \"Used to generate social media and search engine descriptions for root pages.\",\r\n }),\r\n siteUrl: field({\r\n type: \"string\",\r\n title: \"Site URL\",\r\n description:\r\n \"The full URL of your website (e.g., https://www.example.com).\",\r\n icon: \"i-mdi-web\",\r\n }),\r\n favicon: field({\r\n type: \"media\",\r\n title: \"Favicon\",\r\n description:\r\n \"The favicon for your website (typically a 32x32 pixel image).\",\r\n icon: \"i-mdi-image\",\r\n }),\r\n ogImage: field({\r\n type: \"media\",\r\n title: \"Default Open Graph Image\",\r\n description:\r\n \"The default image to use for Open Graph tags when no specific image is set.\",\r\n icon: \"i-mdi-image\",\r\n }),\r\n twitterHandle: field({\r\n type: \"string\",\r\n title: \"Twitter Handle\",\r\n description: \"Your Twitter username (without the @ symbol).\",\r\n icon: \"i-mdi-twitter\",\r\n }),\r\n facebookAppId: field({\r\n type: \"string\",\r\n title: \"Facebook App ID\",\r\n description:\r\n \"Your Facebook App ID for improved Open Graph integration.\",\r\n icon: \"i-mdi-facebook\",\r\n }),\r\n googleSiteVerification: field({\r\n type: \"string\",\r\n title: \"Google Site Verification\",\r\n description: \"The Google Search Console verification code.\",\r\n icon: \"i-mdi-google\",\r\n }),\r\n },\r\n }),\r\n navigation: group({\r\n title: \"Navigation\",\r\n description: \"Configure the main navigation of your site.\",\r\n icon: \"i-mdi-menu\",\r\n fields: {\r\n items: field({\r\n type: \"array\",\r\n title: \"Navigation Items\",\r\n description: \"Define the main navigation links for your site.\",\r\n items: {\r\n type: \"object\",\r\n properties: {\r\n label: field({\r\n type: \"string\",\r\n title: \"Label\",\r\n description: \"The text to display for this navigation item.\",\r\n }),\r\n to: field({\r\n type: \"string\",\r\n title: \"Route\",\r\n description:\r\n \"The route path for this navigation item (e.g., /about, /contact).\",\r\n }),\r\n icon: field({\r\n type: \"string\",\r\n title: \"Icon\",\r\n description:\r\n \"Optional icon class for the navigation item (e.g., i-mdi-home).\",\r\n }),\r\n children: field({\r\n type: \"array\",\r\n title: \"Submenus\",\r\n description: \"Optional submenu items for dropdown navigation.\",\r\n items: {\r\n type: \"object\",\r\n properties: {\r\n label: field({\r\n type: \"string\",\r\n title: \"Submenu Label\",\r\n description: \"The text to display for this submenu item.\",\r\n }),\r\n to: field({\r\n type: \"string\",\r\n title: \"Submenu Route\",\r\n description: \"The route path for this submenu item.\",\r\n }),\r\n },\r\n },\r\n }),\r\n },\r\n },\r\n default: [\r\n { label: \"Home\", to: \"/\", icon: \"i-mdi-home\" },\r\n { label: \"About\", to: \"/about\", icon: \"i-mdi-information\" },\r\n { label: \"Contact\", to: \"/contact\", icon: \"i-mdi-email\" },\r\n ],\r\n }),\r\n },\r\n }),\r\n },\r\n});\r\n```\n\n### Describe the bug\n\nI would like to be able to open up the SEO and logo for the user to alter themselves, the studio deployment is displaying the correct data fields and I'm able to edit them without issue, however I can't figure out how to access the data inside of the app? The docs don't explain how to do so and I tried `const config = useAppConfig()` however this only displays the standard locally defined app configuration and no data from the studio deployment.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3096],{"name":3097,"color":3098},"pending triage","E99695",28284,"Can't seem to access studio configuration data in application","2024-07-24T08:43:08Z","https://github.com/nuxt/nuxt/issues/28284",0.7220881,{"description":3105,"labels":3106,"number":3114,"owner":3019,"repository":3036,"state":3059,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### 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_",[3107,3108,3109,3112],{"name":3030,"color":3031},{"name":3033,"color":3034},{"name":3110,"color":3111},"closed-by-bot","ededed",{"name":3113,"color":3111},"stale",2013,"UToggle Color attribute not connected to off Icon","2025-06-19T02:12:11Z","https://github.com/nuxt/ui/issues/2013",0.72384876,["Reactive",3120],{},["Set"],["ShallowReactive",3123],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fiXeOb0rUkuWAzRUEQ0v0PCQXz7RT3dRf4tJkbyDVDTs":-1},"/nuxt/icon/176"]