From 1ed8fc35019c772d1334e0d0f43584f7a4044ccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oktay=20=C5=9Eenkan?= <oktay.senkan@gmail.com>
Date: Sat, 5 Oct 2024 22:41:01 +0300
Subject: [PATCH] feat: implement dynamic import for icon components

---
 apps/vite-vue/src/App.vue                     |  2 +-
 packages/core/src/constants.ts                |  5 ---
 .../core/src/errors/icon-not-found.error.ts   |  8 -----
 .../core/src/errors/invalid-icon.error.ts     |  8 -----
 .../src/errors/plugin-not-installed.error.ts  | 20 -----------
 packages/react/src/iconify.tsx                | 34 +++++++++++++------
 packages/svelte/src/lib/Iconify.svelte        | 26 ++++++++------
 packages/vue/src/Iconify.vue                  | 23 +++++++++----
 8 files changed, 58 insertions(+), 68 deletions(-)
 delete mode 100644 packages/core/src/constants.ts
 delete mode 100644 packages/core/src/errors/icon-not-found.error.ts
 delete mode 100644 packages/core/src/errors/invalid-icon.error.ts
 delete mode 100644 packages/core/src/errors/plugin-not-installed.error.ts

diff --git a/apps/vite-vue/src/App.vue b/apps/vite-vue/src/App.vue
index cb40d95..0aa71d0 100644
--- a/apps/vite-vue/src/App.vue
+++ b/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" />
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
deleted file mode 100644
index dc04ecf..0000000
--- a/packages/core/src/constants.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const fallbackIcon = {
-  svg: '<svg width="32" height="32" viewBox="0 0 24 24" > <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m-1-5h2v2h-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1a1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355" /> </svg>',
-  width: 32,
-  height: 32,
-};
diff --git a/packages/core/src/errors/icon-not-found.error.ts b/packages/core/src/errors/icon-not-found.error.ts
deleted file mode 100644
index 7f69258..0000000
--- a/packages/core/src/errors/icon-not-found.error.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-const IconNotFoundError = (iconName: string, prefix: string) =>
-  new Error(
-    `[React Native Iconify]
-  
-Icon "${iconName}" not found in collection "${prefix}".`
-  );
-
-export default IconNotFoundError;
diff --git a/packages/core/src/errors/invalid-icon.error.ts b/packages/core/src/errors/invalid-icon.error.ts
deleted file mode 100644
index a5c4c18..0000000
--- a/packages/core/src/errors/invalid-icon.error.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-const InvalidIcon = (iconName: string) =>
-  new Error(
-    `[React Native Iconify]
-
-Icon "${iconName}" is not a valid icon.`
-  );
-
-export default InvalidIcon;
diff --git a/packages/core/src/errors/plugin-not-installed.error.ts b/packages/core/src/errors/plugin-not-installed.error.ts
deleted file mode 100644
index 2b7c99c..0000000
--- a/packages/core/src/errors/plugin-not-installed.error.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-const PluginNotInstalledError = () =>
-  new Error(
-    `[React Native Iconify]
-  
-  You need to install a Babel plugin before using this library. You can continue by adding the following to your babel.config.js'
-  
-  Example:
-  
-  module.exports = {
-    presets: [
-      ...
-    ],
-    plugins: [
-      ...
-      'react-native-iconify/plugin',
-    ],
-  };`
-  );
-
-export default PluginNotInstalledError;
diff --git a/packages/react/src/iconify.tsx b/packages/react/src/iconify.tsx
index 6d4f97b..93c62c6 100644
--- a/packages/react/src/iconify.tsx
+++ b/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;
diff --git a/packages/svelte/src/lib/Iconify.svelte b/packages/svelte/src/lib/Iconify.svelte
index 58b24c7..6948b88 100644
--- a/packages/svelte/src/lib/Iconify.svelte
+++ b/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}
diff --git a/packages/vue/src/Iconify.vue b/packages/vue/src/Iconify.vue
index 991810f..80bf4f8 100644
--- a/packages/vue/src/Iconify.vue
+++ b/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>