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

Author: zAlweNy26

src/runtime/components/Icon.vue

@@ -1,14 +1,11 @@
 <script lang="ts">
+import type { RuntimeOptions } from '@nuxt/icon'
+
 export interface IconProps {
   name: string | object
   mode?: 'svg' | 'css'
   size?: string | number
-  customize?: (
-    content: string,
-    name?: string,
-    prefix?: string,
-    provider?: string
-  ) => string
+  customize?: RuntimeOptions['customize']
 }
 </script>
 

src/runtime/vue/components/Icon.vue

@@ -1,18 +1,39 @@
-<script lang="ts">
-import type { IconProps as NuxtIconProps } from '../../types'
-
-export interface IconProps {
-  name: NuxtIconProps['name']
-}
-</script>
-
 <script setup lang="ts">
+import type { IconProps } from '../../types'
+import type { IconifyRenderMode } from '@iconify/vue'
+import { computed } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
+import { useAppConfig } from '#imports'
+import type { RuntimeOptions } from '@nuxt/icon'
+
+const props = defineProps<IconProps>()
+
+const appConfig = useAppConfig()
+
+function resolveCustomizeFn(
+  customize: RuntimeOptions['customize'] | boolean | null | undefined,
+  globalCustomize: RuntimeOptions['customize'] | undefined
+): RuntimeOptions['customize'] | undefined {
+  if (customize === false) return undefined
+  if (customize === true || customize === null) return globalCustomize
+  return customize
+}
 
-defineProps<IconProps>()
+const resolvedMode = computed(() => {
+  const mode = props.mode || appConfig.icon?.mode
+  if (mode === 'css') return 'style'
+  return mode as IconifyRenderMode
+})
 </script>
 
 <template>
-  <IconifyIcon v-if="typeof name === 'string'" :icon="name.replace(/^i-/, '')" />
+  <IconifyIcon
+    v-if="typeof name === 'string'"
+    :icon="name.replace(/^i-/, '')"
+    :mode="resolvedMode"
+    :width="size || appConfig.icon?.size"
+    :height="size || appConfig.icon?.size"
+    :customise="resolveCustomizeFn(props.customize, appConfig.icon?.customize)"
+  />
   <component :is="name" v-else />
 </template>

src/unplugin.ts

@@ -8,6 +8,7 @@ import type { Options as ComponentsOptions } from 'unplugin-vue-components/types
 import { defu } from 'defu'
 import tailwind from '@tailwindcss/vite'
 import type colors from 'tailwindcss/colors'
+import type { RuntimeOptions } from '@nuxt/icon'
 
 import type * as ui from '#build/ui'
 
@@ -37,6 +38,10 @@ export interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode'
   /** Whether to generate declaration files for auto-imported components. */
   dts?: boolean
   ui?: AppConfigUI
+  /**
+   * Default props for the `Icon` component
+   */
+  icon?: Pick<RuntimeOptions, 'customize' | 'size' | 'mode'>
   /**
    * Enable or disable `@vueuse/core` color-mode integration
    * @defaultValue `true`
@@ -64,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),