In our workplace, the designer opted to incorporate ionicons but the documentation only provides instructions on how to use them without Ionic:
Insert the following
<script>at the end of your page, right before the closing</body>tag, to activate them.
<script type="module" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83eaecedeae0ecedf0c3b6adb6adb1">[email protected]</a>/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c252322252f23223f0c796279627e">[email protected]</a>/dist/ionicons/ionicons.js"></script>
To utilize a predefined icon from Ionicons package, specify the name attribute on the ion-icon component:
<ion-icon name="heart"></ion-icon>
However, this method requires a GET request to the CDN (unpkg.com), causing the icons to "flash" and shift the UI during loading.
Is there a way to utilize the NPM package and import it into the project to ensure instant loading of icons without affecting the UI?
I attempted the following in my svelte-kit project:
First attempt
<script>
import "ionicons/dist/ionicons/ionicons.esm";
</script>
This resulted in the following error in my terminal:
TypeError: u.querySelector is not a function
at Module.q (/node_modules/.pnpm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99f0f6f7f0faf6f7ead9afb7a9b7ab">[email protected]</a>/node_modules/ionicons/dist/ionicons/p-9857dedb.js:3:6277)
at eval (/node_modules/.pnpm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b0b6b7b0bab6b7aa99eff7e9f7eb">[email protected]</a>/node_modules/ionicons/dist/ionicons/ionicons.esm.js?v=642066af:4:162)
ELIFECYCLE Command failed with exit code 1.
Second attempt
<script>
import "ionicons/dist/ionicons/ionicons.js";
</script>
This led to the following error:
ReferenceError: window is not defined
at Object.<anonymous> (C:\Users\Carlos Daniel\Documents\code\jequi-frontend\node_modules\.pnpm\<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bdd4d2d3d4ded2d3cefd8b938d938f">[email protected]</a>\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)
Third attempt
<script>
import { onMount } from "svelte";
// no SSR
onMount(async () => {
await import("ionicons/dist/ionicons/ionicons.js");
});
</script>
This produced an error in the browser's console:
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)
Fourth attempt
<script>
import { onMount } from "svelte";
// no SSR
onMount(async () => {
await import("ionicons/dist/ionicons/ionicons.esm");
});
</script>
This resulted in an error in the browser's console:
Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
at ionicons.esm.js:1:109
at ionicons.esm.js:1:134
and another one in my terminal:
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.
Soooo....
Any suggestions on how to resolve this issue? I prefer not to rely on a CDN due to the UI shifting during loading, and unfortunately, switching to a different icon library is not an option as my boss is firm on sticking with ionicons.
I am aware of some packages designed for svelte, but they are unofficial and their implementation seems cumbersome. I've used them in previous projects and managing all the imports was challenging.
Thank you in advance!