feat: implement dynamic import for icon components

apps/vite-vue/src/App.vue

@@ -2,7 +2,7 @@
 
 <template>
   <main>
-    <Iconify name="mdi:home" :size="24" />
+    <Iconify name="mdi:home" :size="32" />
     <Iconify name="logos:active-campaign" />
     <Iconify name="logos:apache-superset-icon" />
     <Iconify name="invalid:icon" />

packages/react/src/iconify.tsx

@@ -1,18 +1,32 @@
 import React from "react";
 import { getIconDetails, IconifyProps } from "@oktaytest/icon-loader";
 
-// @ts-ignore
-import icons from "oktay";
-
 export const Iconify = (props: IconifyProps) => {
-  const details = getIconDetails(props, icons);
-
-  return (
-    <svg
-      {...details.attributes}
-      dangerouslySetInnerHTML={{ __html: details.innerHtml }}
-    />
+  const [Component, setComponent] = React.useState<React.ReactElement | null>(
+    null
   );
+
+  const loadComponent = React.useCallback(async () => {
+    // @ts-ignore
+    const iconsImport = await import("oktay");
+
+    const icons = iconsImport.default ?? iconsImport;
+
+    const details = getIconDetails(props, icons);
+
+    setComponent(
+      <svg
+        {...details.attributes}
+        dangerouslySetInnerHTML={{ __html: details.innerHtml }}
+      />
+    );
+  }, [props]);
+
+  React.useEffect(() => {
+    loadComponent();
+  }, []);
+
+  return Component;
 };
 
 export default Iconify;

packages/svelte/src/lib/Iconify.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
-  import type { Icon } from "@oktaytest/core";
   import { getIconDetails } from "@oktaytest/icon-loader";
 
   export let name: string;
   export let size: number | undefined = undefined;
   export let color: string | undefined = undefined;
 
-  // @ts-ignore
-  import icons from "oktay";
+  let details: ReturnType<typeof getIconDetails> | null = null;
 
-  $: details = getIconDetails(
-    { name, color, size },
-    icons as Record<string, Icon>
-  );
+  const loadIcons = async () => {
+    // @ts-ignore
+    const iconsImport = await import("oktay");
+
+    const icons = iconsImport.default ?? iconsImport;
+
+    details = getIconDetails({ name, color, size }, icons);
+  };
+
+  $: name, size, color, loadIcons();
 </script>
 
-<svg {...details.attributes}>
-  {@html details.innerHtml}
-</svg>
+{#if details}
+  <svg {...details.attributes}>
+    {@html details.innerHtml}
+  </svg>
+{/if}

packages/vue/src/Iconify.vue

@@ -1,15 +1,26 @@
 <script setup lang="ts">
-import { defineProps, computed } from "vue";
+import { defineProps, ref, watch, onMounted } from "vue";
 import { getIconDetails, IconifyProps } from "@oktaytest/icon-loader";
 
-// @ts-ignore
-import icons from "oktay";
-
 const props = defineProps<IconifyProps>();
 
-const details = computed(() => getIconDetails(props, icons));
+const details = ref<ReturnType<typeof getIconDetails> | null>(null);
+
+const loadIcons = async () => {
+  // @ts-ignore
+  const iconsImport = await import("oktay");
+  const icons = iconsImport.default ?? iconsImport;
+  details.value = getIconDetails(props, icons);
+};
+
+watch(props, loadIcons);
+onMounted(loadIcons);
 </script>
 
 <template>
-  <svg v-html="details.innerHtml" v-bind="details.attributes"></svg>
+  <svg
+    v-if="details"
+    v-html="details.innerHtml"
+    v-bind="details.attributes"
+  ></svg>
 </template>