fix: tolerant nullish icon name, fix #217

Author: antfu

src/runtime/components/css.ts

@@ -77,12 +77,14 @@ export const NuxtIconCss = /* @__PURE__ */ defineComponent({
   async setup(props) {
     const nuxt = useNuxtApp()
     const options = useAppConfig().icon as NuxtIconRuntimeOptions
-    const cssClass = computed(() => options.cssSelectorPrefix + props.name)
+    const cssClass = computed(() => props.name ? options.cssSelectorPrefix + props.name : '')
 
     function getIcon(name: string) {
-      const registry = _getIcon(name)
-      if (registry)
-        return registry
+      if (!name)
+        return
+      const icon = _getIcon(name)
+      if (icon)
+        return icon
       const payload = nuxt.payload.data[name]
       if (payload) {
         addIcon(name, payload)
@@ -173,7 +175,7 @@ export const NuxtIconCss = /* @__PURE__ */ defineComponent({
             })
           }
           // Dedupe CSS
-          if (!ssrCSS.has(props.name)) {
+          if (props.name && !ssrCSS.has(props.name)) {
             const css = getCSS(icon, false)
             ssrCSS.set(props.name, css)
           }

src/runtime/components/shared.ts

@@ -1,10 +1,13 @@
 import { computed } from 'vue'
 import { loadIcons, getIcon as _getIcon } from '@iconify/vue'
+import type { IconifyIcon } from '@iconify/types'
 import type { NuxtIconRuntimeOptions } from '../../types'
 import { useAppConfig } from '#imports'
 import { init } from '#build/nuxt-icon-client-bundle'
 
-export async function loadIcon(name: string) {
+export async function loadIcon(name: string): Promise<Required<IconifyIcon> | null> {
+  if (!name)
+    return null
   init()
   await new Promise(resolve => loadIcons([name], () => resolve(true)))
     .catch(() => null)

src/runtime/components/svg.ts

@@ -24,20 +24,22 @@ export const NuxtIconSvg = /* @__PURE__ */ defineComponent({
 
     const storeKey = 'i-' + name.value
 
-    // On server side, we fetch the icon data and store it in the payload
-    if (import.meta.server) {
-      useAsyncData(
-        storeKey,
-        () => loadIcon(name.value),
-        { deep: false },
-      )
-    }
+    if (name.value) {
+      // On server side, we fetch the icon data and store it in the payload
+      if (import.meta.server) {
+        useAsyncData(
+          storeKey,
+          () => loadIcon(name.value),
+          { deep: false },
+        )
+      }
 
-    // On client side, we feed Iconify we the data we have from server side to avoid hydration mismatch
-    if (import.meta.client) {
-      const payload = nuxt.payload.data[storeKey]
-      if (payload) {
-        addIcon(name.value, payload)
+      // On client side, we feed Iconify we the data we have from server side to avoid hydration mismatch
+      if (import.meta.client) {
+        const payload = nuxt.payload.data[storeKey]
+        if (payload) {
+          addIcon(name.value, payload)
+        }
       }
     }