fix(Icon): render bundled icons during SSR in Vue (#6841)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

Author: mathieutu

src/runtime/vue/components/Icon.vue

@@ -7,7 +7,7 @@ type CustomizeFn = Exclude<IconProps['customize'], boolean | null | undefined>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Icon as IconifyIcon } from '@iconify/vue'
+import { Icon as IconifyIcon, iconLoaded } from '@iconify/vue'
 import { useAppConfig } from '#imports'
 
 const props = defineProps<IconProps>()
@@ -32,16 +32,23 @@ const mode = computed(() => {
 const size = computed(() => props.size || appConfig.icon?.size)
 
 const customize = computed(() => resolveCustomizeFn(props.customize, appConfig.icon?.customize))
+
+const icon = computed(() => typeof props.name === 'string' ? props.name.replace(/^i-/, '') : '')
+
+// `@iconify/vue` only resolves icon data in `setup()` when `ssr` is set. Only opt in for icons
+// already in memory (bundled) so the others keep loading from the API on mount.
+const ssr = computed(() => iconLoaded(icon.value))
 </script>
 
 <template>
   <IconifyIcon
     v-if="typeof name === 'string'"
-    :icon="name.replace(/^i-/, '')"
+    :icon="icon"
     :mode="mode"
     :width="size"
     :height="size"
     :customise="customize"
+    :ssr="ssr"
   />
   <component :is="name" v-else />
 </template>

test/components/Icon.spec.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from 'vitest'
+import { h, createSSRApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { addIcon, setCustomIconLoader } from '@iconify/vue'
+import Icon from '../../src/runtime/vue/components/Icon.vue'
+
+function renderIconToString(name: string) {
+  return renderToString(createSSRApp({ render: () => h(Icon, { name, mode: 'svg' }) }))
+}
+
+describe('Icon', () => {
+  it('outputs the real icon body when server-rendering a preloaded icon', async () => {
+    addIcon('mock:server-icon', {
+      body: '<path d="M2 2h20v20H2z" />',
+      width: 24,
+      height: 24
+    })
+
+    const html = await renderIconToString('i-mock-server-icon')
+
+    expect(html).toContain('<path')
+  })
+
+  it('keeps working on the client for a preloaded icon', async () => {
+    addIcon('mock:client-icon', {
+      body: '<path d="M2 2h20v20H2z" />',
+      width: 24,
+      height: 24
+    })
+
+    const wrapper = await mountSuspended(Icon, {
+      props: { name: 'i-mock-client-icon', mode: 'svg' }
+    })
+
+    expect(wrapper.html()).toContain('<path')
+  })
+
+  it('falls back to an empty svg on the client when the icon is unknown', async () => {
+    // null loader on a dedicated prefix so the lookup stays offline instead of hitting the Iconify API
+    setCustomIconLoader(() => null, 'mock-missing')
+
+    const wrapper = await mountSuspended(Icon, {
+      props: { name: 'i-mock-missing:icon', mode: 'svg' }
+    })
+
+    expect(wrapper.html()).toContain('<svg')
+    expect(wrapper.html()).not.toContain('<path')
+  })
+
+  it('never asks the loader for an icon that is not preloaded during SSR', async () => {
+    // isolated prefix so a load queued by another test's `onMounted` can't bleed into this assertion
+    const fetchIcon = vi.fn(() => new Promise<never>(() => {}))
+    setCustomIconLoader(fetchIcon, 'mock-ssr-remote')
+
+    await renderIconToString('i-mock-ssr-remote:icon')
+    // the loader call is scheduled through `setTimeout`, give it a chance to run before checking
+    await new Promise(resolve => setTimeout(resolve))
+
+    expect(fetchIcon).not.toHaveBeenCalled()
+  })
+})