feat(Icon): add global options on Vue-only side

[zAlweNy26]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

I saw that there was a missing global option to customize the Icon component on the Vue side, as it is made by the @nuxt/icon module on the Nuxt side.
I thought it would have been better to align to the @nuxt/icon options so I used them as reference and adapted to the @iconify/vue Icon component.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

Additional Comments:

src/unplugin.ts (line 72):
The new icon option defined in NuxtUIOptions is never passed to the appConfig object, so it will always be undefined at runtime, causing all Icon component global configuration to be ignored.

View Details

📝 Patch Details

diff --git a/src/unplugin.ts b/src/unplugin.ts
index fcf4b053..66396272 100644
--- a/src/unplugin.ts
+++ b/src/unplugin.ts
@@ -69,7 +69,7 @@ export const NuxtUIPlugin = createUnplugin<NuxtUIOptions | undefined>((_options
   options.theme = options.theme || {}
   options.theme.colors = resolveColors(options.theme.colors)
 
-  const appConfig = defu({ ui: options.ui, colorMode: options.colorMode }, { ui: getDefaultUiConfig(options.theme.colors) })
+  const appConfig = defu({ ui: options.ui, colorMode: options.colorMode, icon: options.icon }, { ui: getDefaultUiConfig(options.theme.colors) })
 
   return [
     NuxtEnvironmentPlugin(options),

Analysis

Icon configuration options ignored due to missing appConfig.icon assignment

What fails: NuxtUIOptions.icon configuration (mode, size, customize) is never passed to appConfig in src/unplugin.ts:72, causing Icon.vue component to always receive undefined for global defaults

How to reproduce:

// Configure NuxtUI with icon defaults
const options = {
  icon: { mode: 'svg', size: '24px', customize: fn }
};
// Icon component tries to access appConfig.icon.mode, appConfig.icon.size, appConfig.icon.customize
// All return undefined instead of configured values

Result: Icon component at src/runtime/vue/components/Icon.vue:23,34-36 receives undefined for appConfig.icon?.mode, appConfig.icon?.size, and appConfig.icon?.customize, ignoring all global configuration

Expected: Icon component should receive the configured global defaults when individual props are not provided

Technical details: Line 72 in src/unplugin.ts constructs appConfig with only ui and colorMode, but omits icon: options.icon despite the Icon component expecting it per @nuxt/icon RuntimeOptions

[vercel]

Suggested change

	customize?: RuntimeOptions['customize']
	customize?: RuntimeOptions['customize'] | boolean | null

The customize prop type doesn't include boolean or null values, but the Vue Icon component expects to handle these values to control whether the global customize function should be used.

View Details

Analysis

IconProps.customize type is too restrictive, prevents boolean/null values

What fails: IconProps interface in src/runtime/components/Icon.vue only accepts RuntimeOptions['customize'] (function type) but the Vue component implementation explicitly supports boolean | null | undefined values

How to reproduce:

import type { IconProps } from './src/runtime/components/Icon.vue'
const props: IconProps = { name: "test", customize: true } // TypeScript error

Result: TypeScript compilation fails with "Type 'boolean' is not assignable to type 'IconifyIconCustomizeCallback'"

Expected: Should accept boolean and null values as the Vue component's resolveCustomizeFn function handles these cases (lines 13-20 in src/runtime/vue/components/Icon.vue)

The @nuxt/icon component already defines customize as IconifyIconCustomizeCallback | boolean | null, so NuxtUI should match this type definition.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5354

commit: 7f772a2