在我的公司，设计师决定使用ionicons，但docs只指定了这种使用方式，没有离子：
将下面的<script>放在页面的末尾，</body>结束标记之前，以启用它们。

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

要使用Ionicons包中得内置图标，请填充ion-icon组件上得name属性：

<ion-icon name="heart"></ion-icon>

但这样做需要向CDN（unpkg.com）发出一个GET请求，这会使图标“ Flink ”，并在加载时改变UI。

是否有办法使用NPM package并将其导入到我的项目中？这样图标将立即加载，而无需移动UI。

我在我的svelte-kit项目中尝试了以下方法：

首次尝试

<script>
  import "ionicons/dist/ionicons/ionicons.esm";
</script>

这将在我的终端中抛出以下错误：

TypeError: u.querySelector is not a function
    at Module.q (/node_modules/.pnpm/ionicons@6.0.2/node_modules/ionicons/dist/ionicons/p-9857dedb.js:3:6277)
    at eval (/node_modules/.pnpm/ionicons@6.0.2/node_modules/ionicons/dist/ionicons/ionicons.esm.js?v=642066af:4:162)
 ELIFECYCLE  Command failed with exit code 1.

第二次尝试

<script>
  import "ionicons/dist/ionicons/ionicons.js";
</script>

这会掷回这个错误：

ReferenceError: window is not defined
    at Object.<anonymous> (C:\Users\Carlos Daniel\Documents\code\jequi-frontend\node_modules\.pnpm\ionicons@6.0.2\node_modules\ionicons\dist\ionicons\ionicons.js:130:9)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)

第三次尝试

<script>
  import { onMount } from "svelte";

  // no SSR
  onMount(async () => {
    await import("ionicons/dist/ionicons/ionicons.js");
  });
</script>

这会在浏览器的控制台中抛出以下错误：

GET http://localhost:3010/p-09cd4d8b.system.js net::ERR_ABORTED 404 (Not Found)

Uncaught (in promise) Error: Error loading http://localhost:3010/p-09cd4d8b.system.js at HTMLScriptElement.<anonymous> (ionicons.js:107:2894)

第四次尝试

<script>
  import { onMount } from "svelte";

  // no SSR
  onMount(async () => {
    await import("ionicons/dist/ionicons/ionicons.esm");
  });
</script>

这会在我的浏览器控制台中抛出以下错误：

Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
    at ionicons.esm.js:1:109
    at ionicons.esm.js:1:134

还有我终端里的这个

344|  var J = (e2) => {
345|    const t2 = e2.o.replace(/-/g, "_"), n2 = e2.U, l2 = I.get(n2);
346|    return l2 ? l2[t2] : import(`./${n2}.entry.js`).then((e3) => (I.set(n2, e3), e3[t2]), G);
   |                                ^
347|  };
348|  var K = /* @__PURE__ */ new Map();
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

呜......

**关于如何使这个工作的任何想法？**我真的不想使用CDN，因为在加载时UI的转移，不，我不能只是使用另一个图标库，因为我已经试图说服我的老板改变库，但他们根本不会。

我也知道有一些packages是专为svelte设计的，但它们不是官方的，而且它们的工作方式似乎不是一个很好的实现。我已经在过去的项目中使用过它们，处理所有的导入都是一件痛苦的事情。
提前感谢！