Hydration mismatch warning in vue >=3.4 (nuxt >=3.9) if an SVG uses url(#id)

[andreww2012]

Describe the bug

Hello! I started to get hydration mismatch warnings in Vue 3.4 (Nuxt 3.9) on custom SVGs that have url(#id) expressions.

This is happening because here https://github.com/unplugin/unplugin-icons/blob/68ec8987b75537b79d5fb526d58d81b910d6a77e/src/core/svgId.ts different IDs are generated on client and server.

I'm not totally sure why this is needed, but at least having a way to disable this behavior would be nice. (Or perhaps you can now somehow make use of Nuxt 3.10's useId?)

By the way, I had an idea to patch-package the random ID generation, but was stopped by the fact that the compiled file that includes this code has a random name (chunk-...). I'm wondering why it is so?

Reproduction

https://stackblitz.com/edit/nuxt-starter-hglscy?file=assets%2Ficons%2Flogoo.svg

System Info

Doesn't matter, I believe.

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-hglscy (Open reproduction)

[21stc-09]

I encountered the same problem, I roll back the vue version to 3.3.8.

perhaps because of this: vuejs/core#10011

[sardor01]

I'm also having similar issue. @userquin can you help us with this? any suggestions?

[Archetipo95]

We resolved it with this patch using pnpm

diff --git a/dist/chunk-2VDUV4E5.js b/dist/chunk-2VDUV4E5.js
index c6616b09e35d47be4faa93008f9382bf39bfd0e0..5c3b1257e1fcd43230dafdf3370adc25cf63bbde 100644
--- a/dist/chunk-2VDUV4E5.js
+++ b/dist/chunk-2VDUV4E5.js
@@ -1,7 +1,4 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-KLNSLHAC.js";
+import { __spreadProps, __spreadValues } from "./chunk-KLNSLHAC.js";
 
 // src/index.ts
 import { createUnplugin } from "unplugin";
@@ -18,15 +15,17 @@ async function resolveOptions(options) {
     compiler = await guessCompiler(),
     jsx = guessJSX(),
     customCollections = {},
-    iconCustomizer = () => {
-    },
+    iconCustomizer = () => { },
     transform,
-    autoInstall = false
+    autoInstall = false,
   } = options;
-  const webComponents = Object.assign({
-    autoDefine: false,
-    iconPrefix: "icon"
-  }, options.webComponents);
+  const webComponents = Object.assign(
+    {
+      autoDefine: false,
+      iconPrefix: "icon",
+    },
+    options.webComponents,
+  );
   debug("compiler", compiler);
   return {
     scale,
@@ -38,22 +37,22 @@ async function resolveOptions(options) {
     jsx,
     webComponents,
     transform,
-    autoInstall
+    autoInstall,
   };
 }
 async function guessCompiler() {
-  return await getVueVersion() || (isPackageExists("@svgr/core") ? "jsx" : "vue3");
+  return (
+    (await getVueVersion()) || (isPackageExists("@svgr/core") ? "jsx" : "vue3")
+  );
 }
 function guessJSX() {
-  if (isPackageExists("preact"))
-    return "preact";
+  if (isPackageExists("preact")) return "preact";
   return "react";
 }
 async function getVueVersion() {
   try {
     const result = await getPackageInfo("vue");
-    if (!result)
-      return null;
+    if (!result) return null;
     return result.version.startsWith("2.") ? "vue2" : "vue3";
   } catch (e) {
     return null;
@@ -79,13 +78,20 @@ import { camelize } from "@iconify/utils/lib/misc/strings";
 var JSXCompiler = async (svg, collection, icon, options) => {
   var _a;
   const svgrCore = await importModule("@svgr/core");
-  const svgr = svgrCore.transform || (svgrCore.default ? (_a = svgrCore.default.transform) != null ? _a : svgrCore.default : svgrCore.default) || svgrCore;
+  const svgr =
+    svgrCore.transform ||
+    (svgrCore.default
+      ? (_a = svgrCore.default.transform) != null
+        ? _a
+        : svgrCore.default
+      : svgrCore.default) ||
+    svgrCore;
   let res = await svgr(
     svg,
     {
-      plugins: ["@svgr/plugin-jsx"]
+      plugins: ["@svgr/plugin-jsx"],
     },
-    { componentName: camelize(`${collection}-${icon}`) }
+    { componentName: camelize(`${collection}-${icon}`) },
   );
   if (options.jsx !== "react")
     res = res.replace('import * as React from "react";', "");
@@ -126,14 +132,17 @@ var QwikCompiler = async (svg, collection, icon, options) => {
   const defaultOptions = {
     importSource: "@builder.io/qwik",
     runtime: "automatic",
-    componentName: camelize2(`${collection}-${icon}`)
+    componentName: camelize2(`${collection}-${icon}`),
   };
   const mergedOptions = Object.assign({}, defaultOptions, options);
   const svgx = await importModule2("@svgx/core");
   const toJsxComponent = svgx.toJsxComponent;
-  const res = toJsxComponent(svg, __spreadProps(__spreadValues({}, mergedOptions), {
-    defaultExport: true
-  }));
+  const res = toJsxComponent(
+    svg,
+    __spreadProps(__spreadValues({}, mergedOptions), {
+      defaultExport: true,
+    }),
+  );
   return res;
 };
 
@@ -144,7 +153,9 @@ var RawCompiler = (svg) => {
 
 // src/core/compilers/solid.ts
 var SolidCompiler = (svg) => {
-  const svgWithProps = svg.replace(/([{}])/g, "{'$1'}").replace(new RegExp("(?<=<svg[\\s\\S]*?)(>)", "i"), "{...props}>");
+  const svgWithProps = svg
+    .replace(/([{}])/g, "{'$1'}")
+    .replace(new RegExp("(?<=<svg[\\s\\S]*?)(>)", "i"), "{...props}>");
   return `export default (props = {}) => ${svgWithProps}`;
 };
 
@@ -158,47 +169,40 @@ var SvelteCompiler = (svg) => {
   return `${openTag}${content}${closeTag}`;
 };
 function escapeSvelte(str) {
-  return str.replace(/{/g, "&#123;").replace(/}/g, "&#125;").replace(/`/g, "&#96;").replace(/\\([trn])/g, " ");
+  return str
+    .replace(/{/g, "&#123;")
+    .replace(/}/g, "&#125;")
+    .replace(/`/g, "&#96;")
+    .replace(/\\([trn])/g, " ");
 }
 
 // src/core/compilers/vue2.ts
 import { importModule as importModule3 } from "local-pkg";
 
 // src/core/svgId.ts
-var randIdFn = "const __randId = () => Math.random().toString(36).substr(2, 10);";
 function handleSVGId(svg) {
-  const hasID = /="url\(#/.test(svg);
-  const idMap = {};
-  let injectScripts = "";
-  if (hasID) {
-    svg = svg.replace(/\b([\w-]+?)="url\(#(.+?)\)"/g, (_, s, id) => {
-      idMap[id] = `'${id}':'uicons-'+__randId()`;
-      return `:${s}="'url(#'+idMap['${id}']+')'"`;
-    }).replace(/\bid="(.+?)"/g, (full, id) => {
-      if (idMap[id])
-        return `:id="idMap['${id}']"`;
-      return full;
-    });
-    injectScripts = `${randIdFn}const idMap = {${Object.values(idMap).join(",")}};`;
-  }
   return {
-    hasID,
+    hasID: false,
     svg,
-    injectScripts
+    injectScripts: "",
   };
 }
 
 // src/core/compilers/vue2.ts
 var Vue2Compiler = async (svg, collection, icon) => {
   const { compile } = await importModule3("vue-template-compiler");
-  const transpile = (await importModule3("vue-template-es2015-compiler")).default;
+  const transpile = (await importModule3("vue-template-es2015-compiler"))
+    .default;
   const { injectScripts, svg: handled } = handleSVGId(svg);
   const { render } = compile(handled);
   const toFunction = (code2) => {
     return `function () {${code2}}`;
   };
-  let code = transpile(`var __render__ = ${toFunction(render)}
-`, {});
+  let code = transpile(
+    `var __render__ = ${toFunction(render)}
+`,
+    {},
+  );
   code = code.replace(/\s__(render|staticRenderFns)__\s/g, " $1 ");
   code += `
 /* vite-plugin-components disabled */
@@ -219,7 +223,7 @@ var Vue3Compiler = async (svg, collection, icon) => {
   let { code } = compileTemplate({
     source: handled,
     id: `${collection}:${icon}`,
-    filename: `${collection}-${icon}.vue`
+    filename: `${collection}-${icon}.vue`,
   });
   code = code.replace(/^export /gm, "");
   code += `
@@ -231,10 +235,14 @@ export default { name: '${collection}-${icon}', render${injectScripts ? `, data(
 
 // src/core/compilers/web-components.ts
 import { camelize as camelize3 } from "@iconify/utils/lib/misc/strings";
-var WebComponentsCompiler = (svg, collection, icon, { webComponents: options }) => {
+var WebComponentsCompiler = (
+  svg,
+  collection,
+  icon,
+  { webComponents: options },
+) => {
   let id = `${collection}-${icon}`;
-  if (options.iconPrefix)
-    id = `${options.iconPrefix}-${id}`;
+  if (options.iconPrefix) id = `${options.iconPrefix}-${id}`;
   const name = camelize3(id);
   let code = `export default class ${name} extends HTMLElement {`;
   if (options.shadow) {
@@ -254,17 +262,17 @@ customElements.define('${id}', ${name})`;
 
 // src/core/compilers/index.ts
 var compilers = {
-  "astro": AstroCompiler,
-  "jsx": JSXCompiler,
-  "marko": MarkoCompiler,
-  "none": NoneCompiler,
-  "raw": RawCompiler,
-  "solid": SolidCompiler,
-  "svelte": SvelteCompiler,
-  "vue2": Vue2Compiler,
-  "vue3": Vue3Compiler,
+  astro: AstroCompiler,
+  jsx: JSXCompiler,
+  marko: MarkoCompiler,
+  none: NoneCompiler,
+  raw: RawCompiler,
+  solid: SolidCompiler,
+  svelte: SvelteCompiler,
+  vue2: Vue2Compiler,
+  vue3: Vue3Compiler,
   "web-components": WebComponentsCompiler,
-  "qwik": QwikCompiler
+  qwik: QwikCompiler,
 };
 
 // src/core/loader.ts
@@ -277,8 +285,7 @@ function normalizeIconPath(path) {
   return path.replace(iconPathRE, URL_PREFIXES[0]);
 }
 function resolveIconsPath(path) {
-  if (!isIconPath(path))
-    return null;
+  if (!isIconPath(path)) return null;
   path = path.replace(iconPathRE, "");
   const query = {};
   const queryIndex = path.indexOf("?");
@@ -288,8 +295,7 @@ function resolveIconsPath(path) {
     new URLSearchParams(queryRaw).forEach((value, key) => {
       if (key === "raw")
         query.raw = value === "" || value === "true" ? "true" : "false";
-      else
-        query[key] = value;
+      else query[key] = value;
     });
   }
   path = path.replace(/\.\w+$/, "");
@@ -297,7 +303,7 @@ function resolveIconsPath(path) {
   return {
     collection,
     icon,
-    query
+    query,
   };
 }
 async function generateComponent({ collection, icon, query }, options) {
@@ -309,7 +315,7 @@ async function generateComponent({ collection, icon, query }, options) {
     customCollections,
     iconCustomizer: providedIconCustomizer,
     transform,
-    autoInstall = false
+    autoInstall = false,
   } = options;
   const iconifyLoaderOptions = {
     addXmlNs: false,
@@ -323,30 +329,31 @@ async function generateComponent({ collection, icon, query }, options) {
     customizations: {
       transform,
       async iconCustomizer(collection2, icon2, props) {
-        await (providedIconCustomizer == null ? void 0 : providedIconCustomizer(collection2, icon2, props));
+        await (providedIconCustomizer == null
+          ? void 0
+          : providedIconCustomizer(collection2, icon2, props));
         Object.keys(query).forEach((p) => {
           const v = query[p];
-          if (p !== "raw" && v !== void 0 && v !== null)
-            props[p] = v;
+          if (p !== "raw" && v !== void 0 && v !== null) props[p] = v;
         });
-      }
-    }
+      },
+    },
   };
   const svg = await loadNodeIcon(collection, icon, iconifyLoaderOptions);
-  if (!svg)
-    throw new Error(`Icon \`${warn}\` not found`);
+  if (!svg) throw new Error(`Icon \`${warn}\` not found`);
   const _compiler = query.raw === "true" ? "raw" : options.compiler;
   if (_compiler) {
-    const compiler = typeof _compiler === "string" ? compilers[_compiler] : await _compiler.compiler;
-    if (compiler)
-      return compiler(svg, collection, icon, options);
+    const compiler =
+      typeof _compiler === "string"
+        ? compilers[_compiler]
+        : await _compiler.compiler;
+    if (compiler) return compiler(svg, collection, icon, options);
   }
   throw new Error(`Unknown compiler: ${_compiler}`);
 }
 async function generateComponentFromPath(path, options) {
   const resolved = resolveIconsPath(path);
-  if (!resolved)
-    return null;
+  if (!resolved) return null;
   return generateComponent(resolved, options);
 }
 
@@ -363,11 +370,15 @@ var unplugin = createUnplugin((options = {}) => {
         const queryIndex = normalizedId.indexOf("?");
         const res = `${(queryIndex > -1 ? normalizedId.slice(0, queryIndex) : normalizedId).replace(/\.\w+$/i, "").replace(/^\//, "")}${queryIndex > -1 ? `?${normalizedId.slice(queryIndex + 1)}` : ""}`;
         const resolved2 = resolveIconsPath(res);
-        const compiler = ((_a = resolved2 == null ? void 0 : resolved2.query) == null ? void 0 : _a.raw) === "true" ? "raw" : options.compiler;
+        const compiler =
+          ((_a = resolved2 == null ? void 0 : resolved2.query) == null
+            ? void 0
+            : _a.raw) === "true"
+            ? "raw"
+            : options.compiler;
         if (compiler && typeof compiler !== "string") {
           const ext = compiler.extension;
-          if (ext)
-            return `${res}.${ext.startsWith(".") ? ext.slice(1) : ext}`;
+          if (ext) return `${res}.${ext.startsWith(".") ? ext.slice(1) : ext}`;
         } else {
           switch (compiler) {
             case "astro":
@@ -393,23 +404,21 @@ var unplugin = createUnplugin((options = {}) => {
     },
     async load(id) {
       const config = await resolved;
-      const code = await generateComponentFromPath(id, config) || null;
+      const code = (await generateComponentFromPath(id, config)) || null;
       if (code) {
         return {
           code,
-          map: { version: 3, mappings: "", sources: [] }
+          map: { version: 3, mappings: "", sources: [] },
         };
       }
     },
     rollup: {
       api: {
-        config: options
-      }
-    }
+        config: options,
+      },
+    },
   };
 });
 var src_default = unplugin;
 
-export {
-  src_default
-};
+export { src_default };
diff --git a/dist/chunk-KTXRBLM5.cjs b/dist/chunk-KTXRBLM5.cjs
index 89b33ea73a91fbb35b41511b9d594fde93aae3dc..9435d1a6af7822968797f411d485b11f07104938 100644
--- a/dist/chunk-KTXRBLM5.cjs
+++ b/dist/chunk-KTXRBLM5.cjs
@@ -1,14 +1,18 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
-var _chunkHZ6LTHYMcjs = require('./chunk-HZ6LTHYM.cjs');
+var _chunkHZ6LTHYMcjs = require("./chunk-HZ6LTHYM.cjs");
 
 // src/index.ts
-var _unplugin = require('unplugin');
+var _unplugin = require("unplugin");
 
 // src/core/options.ts
-var _localpkg = require('local-pkg');
-var _debug = require('debug'); var _debug2 = _interopRequireDefault(_debug);
+var _localpkg = require("local-pkg");
+var _debug = require("debug");
+var _debug2 = _interopRequireDefault(_debug);
 var debug = _debug2.default.call(void 0, "unplugin-icons:options");
 async function resolveOptions(options) {
   const {
@@ -18,15 +22,17 @@ async function resolveOptions(options) {
     compiler = await guessCompiler(),
     jsx = guessJSX(),
     customCollections = {},
-    iconCustomizer = () => {
-    },
+    iconCustomizer = () => {},
     transform,
-    autoInstall = false
+    autoInstall = false,
   } = options;
-  const webComponents = Object.assign({
-    autoDefine: false,
-    iconPrefix: "icon"
-  }, options.webComponents);
+  const webComponents = Object.assign(
+    {
+      autoDefine: false,
+      iconPrefix: "icon",
+    },
+    options.webComponents,
+  );
   debug("compiler", compiler);
   return {
     scale,
@@ -38,22 +44,23 @@ async function resolveOptions(options) {
     jsx,
     webComponents,
     transform,
-    autoInstall
+    autoInstall,
   };
 }
 async function guessCompiler() {
-  return await getVueVersion() || (_localpkg.isPackageExists.call(void 0, "@svgr/core") ? "jsx" : "vue3");
+  return (
+    (await getVueVersion()) ||
+    (_localpkg.isPackageExists.call(void 0, "@svgr/core") ? "jsx" : "vue3")
+  );
 }
 function guessJSX() {
-  if (_localpkg.isPackageExists.call(void 0, "preact"))
-    return "preact";
+  if (_localpkg.isPackageExists.call(void 0, "preact")) return "preact";
   return "react";
 }
 async function getVueVersion() {
   try {
     const result = await _localpkg.getPackageInfo.call(void 0, "vue");
-    if (!result)
-      return null;
+    if (!result) return null;
     return result.version.startsWith("2.") ? "vue2" : "vue3";
   } catch (e) {
     return null;
@@ -61,7 +68,7 @@ async function getVueVersion() {
 }
 
 // src/core/loader.ts
-var _nodeloader = require('@iconify/utils/lib/loader/node-loader');
+var _nodeloader = require("@iconify/utils/lib/loader/node-loader");
 
 // src/core/compilers/astro.ts
 var AstroCompiler = (svg) => {
@@ -75,17 +82,24 @@ ${svgWithProps}`;
 
 // src/core/compilers/jsx.ts
 
-var _strings = require('@iconify/utils/lib/misc/strings');
+var _strings = require("@iconify/utils/lib/misc/strings");
 var JSXCompiler = async (svg, collection, icon, options) => {
   var _a;
   const svgrCore = await _localpkg.importModule.call(void 0, "@svgr/core");
-  const svgr = svgrCore.transform || (svgrCore.default ? (_a = svgrCore.default.transform) != null ? _a : svgrCore.default : svgrCore.default) || svgrCore;
+  const svgr =
+    svgrCore.transform ||
+    (svgrCore.default
+      ? (_a = svgrCore.default.transform) != null
+        ? _a
+        : svgrCore.default
+      : svgrCore.default) ||
+    svgrCore;
   let res = await svgr(
     svg,
     {
-      plugins: ["@svgr/plugin-jsx"]
+      plugins: ["@svgr/plugin-jsx"],
     },
-    { componentName: _strings.camelize.call(void 0, `${collection}-${icon}`) }
+    { componentName: _strings.camelize.call(void 0, `${collection}-${icon}`) },
   );
   if (options.jsx !== "react")
     res = res.replace('import * as React from "react";', "");
@@ -121,19 +135,25 @@ var NoneCompiler = (svg) => {
 
 // src/core/compilers/qwik.ts
 
-
 var QwikCompiler = async (svg, collection, icon, options) => {
   const defaultOptions = {
     importSource: "@builder.io/qwik",
     runtime: "automatic",
-    componentName: _strings.camelize.call(void 0, `${collection}-${icon}`)
+    componentName: _strings.camelize.call(void 0, `${collection}-${icon}`),
   };
   const mergedOptions = Object.assign({}, defaultOptions, options);
   const svgx = await _localpkg.importModule.call(void 0, "@svgx/core");
   const toJsxComponent = svgx.toJsxComponent;
-  const res = toJsxComponent(svg, _chunkHZ6LTHYMcjs.__spreadProps.call(void 0, _chunkHZ6LTHYMcjs.__spreadValues.call(void 0, {}, mergedOptions), {
-    defaultExport: true
-  }));
+  const res = toJsxComponent(
+    svg,
+    _chunkHZ6LTHYMcjs.__spreadProps.call(
+      void 0,
+      _chunkHZ6LTHYMcjs.__spreadValues.call(void 0, {}, mergedOptions),
+      {
+        defaultExport: true,
+      },
+    ),
+  );
   return res;
 };
 
@@ -144,7 +164,9 @@ var RawCompiler = (svg) => {
 
 // src/core/compilers/solid.ts
 var SolidCompiler = (svg) => {
-  const svgWithProps = svg.replace(/([{}])/g, "{'$1'}").replace(new RegExp("(?<=<svg[\\s\\S]*?)(>)", "i"), "{...props}>");
+  const svgWithProps = svg
+    .replace(/([{}])/g, "{'$1'}")
+    .replace(new RegExp("(?<=<svg[\\s\\S]*?)(>)", "i"), "{...props}>");
   return `export default (props = {}) => ${svgWithProps}`;
 };
 
@@ -158,47 +180,43 @@ var SvelteCompiler = (svg) => {
   return `${openTag}${content}${closeTag}`;
 };
 function escapeSvelte(str) {
-  return str.replace(/{/g, "&#123;").replace(/}/g, "&#125;").replace(/`/g, "&#96;").replace(/\\([trn])/g, " ");
+  return str
+    .replace(/{/g, "&#123;")
+    .replace(/}/g, "&#125;")
+    .replace(/`/g, "&#96;")
+    .replace(/\\([trn])/g, " ");
 }
 
 // src/core/compilers/vue2.ts
 
-
 // src/core/svgId.ts
-var randIdFn = "const __randId = () => Math.random().toString(36).substr(2, 10);";
 function handleSVGId(svg) {
-  const hasID = /="url\(#/.test(svg);
-  const idMap = {};
-  let injectScripts = "";
-  if (hasID) {
-    svg = svg.replace(/\b([\w-]+?)="url\(#(.+?)\)"/g, (_, s, id) => {
-      idMap[id] = `'${id}':'uicons-'+__randId()`;
-      return `:${s}="'url(#'+idMap['${id}']+')'"`;
-    }).replace(/\bid="(.+?)"/g, (full, id) => {
-      if (idMap[id])
-        return `:id="idMap['${id}']"`;
-      return full;
-    });
-    injectScripts = `${randIdFn}const idMap = {${Object.values(idMap).join(",")}};`;
-  }
   return {
-    hasID,
+    hasID: false,
     svg,
-    injectScripts
+    injectScripts: "",
   };
 }
 
 // src/core/compilers/vue2.ts
 var Vue2Compiler = async (svg, collection, icon) => {
-  const { compile } = await _localpkg.importModule.call(void 0, "vue-template-compiler");
-  const transpile = (await _localpkg.importModule.call(void 0, "vue-template-es2015-compiler")).default;
+  const { compile } = await _localpkg.importModule.call(
+    void 0,
+    "vue-template-compiler",
+  );
+  const transpile = (
+    await _localpkg.importModule.call(void 0, "vue-template-es2015-compiler")
+  ).default;
   const { injectScripts, svg: handled } = handleSVGId(svg);
   const { render } = compile(handled);
   const toFunction = (code2) => {
     return `function () {${code2}}`;
   };
-  let code = transpile(`var __render__ = ${toFunction(render)}
-`, {});
+  let code = transpile(
+    `var __render__ = ${toFunction(render)}
+`,
+    {},
+  );
   code = code.replace(/\s__(render|staticRenderFns)__\s/g, " $1 ");
   code += `
 /* vite-plugin-components disabled */
@@ -214,12 +232,15 @@ export default {
 // src/core/compilers/vue3.ts
 
 var Vue3Compiler = async (svg, collection, icon) => {
-  const { compileTemplate } = await _localpkg.importModule.call(void 0, "@vue/compiler-sfc");
+  const { compileTemplate } = await _localpkg.importModule.call(
+    void 0,
+    "@vue/compiler-sfc",
+  );
   const { injectScripts, svg: handled } = handleSVGId(svg);
   let { code } = compileTemplate({
     source: handled,
     id: `${collection}:${icon}`,
-    filename: `${collection}-${icon}.vue`
+    filename: `${collection}-${icon}.vue`,
   });
   code = code.replace(/^export /gm, "");
   code += `
@@ -231,10 +252,14 @@ export default { name: '${collection}-${icon}', render${injectScripts ? `, data(
 
 // src/core/compilers/web-components.ts
 
-var WebComponentsCompiler = (svg, collection, icon, { webComponents: options }) => {
+var WebComponentsCompiler = (
+  svg,
+  collection,
+  icon,
+  { webComponents: options },
+) => {
   let id = `${collection}-${icon}`;
-  if (options.iconPrefix)
-    id = `${options.iconPrefix}-${id}`;
+  if (options.iconPrefix) id = `${options.iconPrefix}-${id}`;
   const name = _strings.camelize.call(void 0, id);
   let code = `export default class ${name} extends HTMLElement {`;
   if (options.shadow) {
@@ -254,17 +279,17 @@ customElements.define('${id}', ${name})`;
 
 // src/core/compilers/index.ts
 var compilers = {
-  "astro": AstroCompiler,
-  "jsx": JSXCompiler,
-  "marko": MarkoCompiler,
-  "none": NoneCompiler,
-  "raw": RawCompiler,
-  "solid": SolidCompiler,
-  "svelte": SvelteCompiler,
-  "vue2": Vue2Compiler,
-  "vue3": Vue3Compiler,
+  astro: AstroCompiler,
+  jsx: JSXCompiler,
+  marko: MarkoCompiler,
+  none: NoneCompiler,
+  raw: RawCompiler,
+  solid: SolidCompiler,
+  svelte: SvelteCompiler,
+  vue2: Vue2Compiler,
+  vue3: Vue3Compiler,
   "web-components": WebComponentsCompiler,
-  "qwik": QwikCompiler
+  qwik: QwikCompiler,
 };
 
 // src/core/loader.ts
@@ -277,8 +302,7 @@ function normalizeIconPath(path) {
   return path.replace(iconPathRE, URL_PREFIXES[0]);
 }
 function resolveIconsPath(path) {
-  if (!isIconPath(path))
-    return null;
+  if (!isIconPath(path)) return null;
   path = path.replace(iconPathRE, "");
   const query = {};
   const queryIndex = path.indexOf("?");
@@ -288,8 +312,7 @@ function resolveIconsPath(path) {
     new URLSearchParams(queryRaw).forEach((value, key) => {
       if (key === "raw")
         query.raw = value === "" || value === "true" ? "true" : "false";
-      else
-        query[key] = value;
+      else query[key] = value;
     });
   }
   path = path.replace(/\.\w+$/, "");
@@ -297,7 +320,7 @@ function resolveIconsPath(path) {
   return {
     collection,
     icon,
-    query
+    query,
   };
 }
 async function generateComponent({ collection, icon, query }, options) {
@@ -309,7 +332,7 @@ async function generateComponent({ collection, icon, query }, options) {
     customCollections,
     iconCustomizer: providedIconCustomizer,
     transform,
-    autoInstall = false
+    autoInstall = false,
   } = options;
   const iconifyLoaderOptions = {
     addXmlNs: false,
@@ -323,30 +346,36 @@ async function generateComponent({ collection, icon, query }, options) {
     customizations: {
       transform,
       async iconCustomizer(collection2, icon2, props) {
-        await (providedIconCustomizer == null ? void 0 : providedIconCustomizer(collection2, icon2, props));
+        await (providedIconCustomizer == null
+          ? void 0
+          : providedIconCustomizer(collection2, icon2, props));
         Object.keys(query).forEach((p) => {
           const v = query[p];
-          if (p !== "raw" && v !== void 0 && v !== null)
-            props[p] = v;
+          if (p !== "raw" && v !== void 0 && v !== null) props[p] = v;
         });
-      }
-    }
+      },
+    },
   };
-  const svg = await _nodeloader.loadNodeIcon.call(void 0, collection, icon, iconifyLoaderOptions);
-  if (!svg)
-    throw new Error(`Icon \`${warn}\` not found`);
+  const svg = await _nodeloader.loadNodeIcon.call(
+    void 0,
+    collection,
+    icon,
+    iconifyLoaderOptions,
+  );
+  if (!svg) throw new Error(`Icon \`${warn}\` not found`);
   const _compiler = query.raw === "true" ? "raw" : options.compiler;
   if (_compiler) {
-    const compiler = typeof _compiler === "string" ? compilers[_compiler] : await _compiler.compiler;
-    if (compiler)
-      return compiler(svg, collection, icon, options);
+    const compiler =
+      typeof _compiler === "string"
+        ? compilers[_compiler]
+        : await _compiler.compiler;
+    if (compiler) return compiler(svg, collection, icon, options);
   }
   throw new Error(`Unknown compiler: ${_compiler}`);
 }
 async function generateComponentFromPath(path, options) {
   const resolved = resolveIconsPath(path);
-  if (!resolved)
-    return null;
+  if (!resolved) return null;
   return generateComponent(resolved, options);
 }
 
@@ -363,11 +392,15 @@ var unplugin = _unplugin.createUnplugin.call(void 0, (options = {}) => {
         const queryIndex = normalizedId.indexOf("?");
         const res = `${(queryIndex > -1 ? normalizedId.slice(0, queryIndex) : normalizedId).replace(/\.\w+$/i, "").replace(/^\//, "")}${queryIndex > -1 ? `?${normalizedId.slice(queryIndex + 1)}` : ""}`;
         const resolved2 = resolveIconsPath(res);
-        const compiler = ((_a = resolved2 == null ? void 0 : resolved2.query) == null ? void 0 : _a.raw) === "true" ? "raw" : options.compiler;
+        const compiler =
+          ((_a = resolved2 == null ? void 0 : resolved2.query) == null
+            ? void 0
+            : _a.raw) === "true"
+            ? "raw"
+            : options.compiler;
         if (compiler && typeof compiler !== "string") {
           const ext = compiler.extension;
-          if (ext)
-            return `${res}.${ext.startsWith(".") ? ext.slice(1) : ext}`;
+          if (ext) return `${res}.${ext.startsWith(".") ? ext.slice(1) : ext}`;
         } else {
           switch (compiler) {
             case "astro":
@@ -393,23 +426,21 @@ var unplugin = _unplugin.createUnplugin.call(void 0, (options = {}) => {
     },
     async load(id) {
       const config = await resolved;
-      const code = await generateComponentFromPath(id, config) || null;
+      const code = (await generateComponentFromPath(id, config)) || null;
       if (code) {
         return {
           code,
-          map: { version: 3, mappings: "", sources: [] }
+          map: { version: 3, mappings: "", sources: [] },
         };
       }
     },
     rollup: {
       api: {
-        config: options
-      }
-    }
+        config: options,
+      },
+    },
   };
 });
 var src_default = unplugin;
 
-
-
 exports.src_default = src_default;

[userquin]

You should use nuxt icon instead, iirc nuxt icon now supports iconify icons and Anthony fix the SSR problem: nuxt/icon#199