fix: added adapter to fix the SSR Icon missing error

[rastuhacode]

🔗 Linked issue

Resolves #518.

📚 Description

After updating the nuxt/icon up from @2.3.1 the icons fail to render if app uses SSR. For ex:

 WARN  [Icon] failed to load icon lucide:sun 

Related issue describes the core regression correctly.

Solution

The simple priority logic to pick correcrt fetch was added to resolve both initial issue #514 (where regression appeared) and remove that regression.

Here's the logic behind the prioritization:

1. Pick event.fetch if it is available as the most "context-rich": relative Nitro routes, preserving request’s headers and context, base URL, etc.
2. Pick useRequestFetch().native if it is available. Used in browser (or future Nuxt 5) and keeping fix by fix: avoid relying on global fetch #514.
   Here's the regression, as Nuxt 4/Nitro 2 useRequestFetch() doesn't expose .native.
3. Pick globalThis.$fetch.native as the Nuxt 4/Nitro 2 SSR compatibility path.
4. Pick globalThis.fetch as the final safety net.

I also added fixture, expanded smoke and wrote regression tests.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 959073c1-5f13-4e11-bf8e-828e0c903601

📥 Commits

Reviewing files that changed from the base of the PR and between 33777b8 and 85e9d7b.

📒 Files selected for processing (5)

• playgrounds/nuxt5/test.mjs
• src/runtime/plugin.ts
• test/fixtures/ssr-runtime/app.vue
• test/fixtures/ssr-runtime/nuxt.config.ts
• test/ssr.test.ts

---

📝 Walkthrough

Walkthrough

The runtime plugin now configures Iconify with a request-aware fetch chain and uses it for custom icon loading. A Nuxt SSR fixture renders the ph:acorn-bold icon with server bundling and disabled API fallback. SSR tests and Nuxt playground assertions verify HTTP success, rendered Iconify markup, embedded SVG data, and the absence of icon-loading errors.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the SSR icon-rendering fix, which matches the main code and test changes.
Description check	✅ Passed	The description explains the SSR regression, fetch-selection fix, fixture, smoke coverage, and regression tests.
Linked Issues check	✅ Passed	The changes address issue #518 by providing an SSR fetch fallback chain and verifying server-rendered SVG icons without loading errors.
Out of Scope Changes check	✅ Passed	The fixture, smoke assertions, fetch logic, and SSR tests are directly related to the linked issue and PR objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/icon@527

commit: 85e9d7b