feat: allow :customize="false" (#334)

Co-authored-by: Anthony Fu <[email protected]>

Author: RBV1

README.md

@@ -293,6 +293,8 @@ const customize = (content: string, name: string, prefix: string, provider: stri
 <template>
   <Icon name="tabler:star" :customize="customize" />
 </template>
+
+<!-- You can also use `:customize="false"` to disabled the global customization function per-usage -->
 ```
 
 In the App Configuration File:

src/runtime/components/css.ts

@@ -4,7 +4,7 @@ import { getIconCSS } from '@iconify/utils/lib/css/icon'
 import type { PropType } from 'vue'
 import type { IconifyIcon } from '@iconify/types'
 import type { NuxtIconRuntimeOptions, NuxtIconRuntimeServerOptions, IconifyIconCustomizeCallback } from '../../types'
-import { loadIcon } from './shared'
+import { loadIcon, resolveCustomizeFn } from './shared'
 import { useAppConfig, useNuxtApp, useHead, useRuntimeConfig, onServerPrefetch } from '#imports'
 
 // This should only be used in the client side
@@ -72,7 +72,8 @@ export const NuxtIconCss = /* @__PURE__ */ defineComponent({
       required: true,
     },
     customize: {
-      type: Function as PropType<IconifyIconCustomizeCallback>,
+      type: [Function, Boolean, null] as PropType<IconifyIconCustomizeCallback | boolean | null>,
+      default: null,
       required: false,
     },
   },
@@ -101,10 +102,11 @@ export const NuxtIconCss = /* @__PURE__ */ defineComponent({
       if (options.cssWherePseudo) {
         iconSelector = `:where(${iconSelector})`
       }
+
       const css = getIconCSS(icon, {
         iconSelector,
         format: 'compressed',
-        customise: props.customize ?? options.customize,
+        customise: resolveCustomizeFn(props.customize, options.customize),
       })
       if (options.cssLayer && withLayer) {
         return `@layer ${options.cssLayer} { ${css} }`

src/runtime/components/index.ts

@@ -25,7 +25,8 @@ export default defineComponent({
       default: null,
     },
     customize: {
-      type: Function as PropType<IconifyIconCustomizeCallback>,
+      type: [Function, Boolean, null] as PropType<IconifyIconCustomizeCallback | boolean | null>,
+      default: null,
       required: false,
     },
   },
@@ -45,7 +46,6 @@ export default defineComponent({
         ? { fontSize: Number.isNaN(+size) ? size : size + 'px' }
         : null
     })
-    const customize = props.customize || runtimeOptions.customize
 
     return () => h(
       component.value,
@@ -54,7 +54,7 @@ export default defineComponent({
         name: name.value,
         class: runtimeOptions.class,
         style: style.value,
-        customize,
+        customize: props.customize,
       },
       slots,
     )

src/runtime/components/shared.ts

@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 import { getIcon as _getIcon, addIcon as _addIcon, loadIcon as _loadIcon } from '@iconify/vue'
 import type { IconifyIcon } from '@iconify/types'
-import type { NuxtIconRuntimeOptions } from '../../types'
+import type { IconifyIconCustomizeCallback, NuxtIconRuntimeOptions } from '../../types'
 import { useAppConfig } from '#imports'
 import { init as initClientBundle } from '#build/nuxt-icon-client-bundle'
 
@@ -60,3 +60,13 @@ export function useResolvedName(getName: () => string) {
     return resolved
   })
 }
+
+export function resolveCustomizeFn(
+  customize: IconifyIconCustomizeCallback | boolean | null | undefined,
+  globalCustomize: IconifyIconCustomizeCallback | undefined,
+):
+    IconifyIconCustomizeCallback | undefined {
+  if (customize === false) return undefined
+  if (customize === true || customize === null) return globalCustomize
+  return customize
+}

src/runtime/components/svg.ts

@@ -2,7 +2,7 @@ import { Icon as Iconify, addIcon } from '@iconify/vue'
 import { h } from 'vue'
 import type { PropType } from 'vue'
 import type { NuxtIconRuntimeOptions, IconifyIconCustomizeCallback } from '../../types'
-import { initClientBundle, loadIcon, useResolvedName } from './shared'
+import { initClientBundle, loadIcon, useResolvedName, resolveCustomizeFn } from './shared'
 import { useAsyncData, useNuxtApp, defineComponent, useAppConfig, onServerPrefetch } from '#imports'
 
 export const NuxtIconSvg = /* @__PURE__ */ defineComponent({
@@ -13,7 +13,8 @@ export const NuxtIconSvg = /* @__PURE__ */ defineComponent({
       required: true,
     },
     customize: {
-      type: Function as PropType<IconifyIconCustomizeCallback>,
+      type: [Function, Boolean, null] as PropType<IconifyIconCustomizeCallback | boolean | null>,
+      default: null,
       required: false,
     },
   },
@@ -54,7 +55,7 @@ export const NuxtIconSvg = /* @__PURE__ */ defineComponent({
       icon: name.value,
       ssr: true,
       // Iconify uses `customise`, where we expose `customize` for consistency
-      customise: props.customize ?? options.customize,
+      customise: resolveCustomizeFn(props.customize, options.customize),
     }, slots)
   },
 })