@dataloop-ai/components 0.16.9 → 0.16.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.9",
+  "version": "0.16.10",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/essential/DlIcon/DlIcon.vue

@@ -32,6 +32,7 @@
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
 import { getColor, loggerFactory } from '../../../utils'
+import { dynamicSvgImport } from '../../../utils/dynamicSvgImport'
 
 export default defineComponent({
     name: 'DlIcon',
@@ -104,7 +105,12 @@ export default defineComponent({
     },
     methods: {
         loadSvg() {
-            return new Promise<void>((resolve, reject) => {
+            return new Promise<void>(async (resolve, reject) => {
+                let dynamicalImagePath = null
+                await dynamicSvgImport(this.icon).then((path: any) => {
+                    dynamicalImagePath = path
+                })
+
                 const svgElement = new Image()
                 svgElement.setAttribute('height', this.size)
                 svgElement.setAttribute('width', this.size)
@@ -128,7 +134,7 @@ export default defineComponent({
                 try {
                     svgElement.src = this.svgSource
                         ? `${this.svgSource}/${this.icon}.svg`
-                        : require(`@dataloop-ai/icons/assets/${this.icon}.svg`)
+                        : dynamicalImagePath
                 } catch (e) {
                     reject(e)
                 }

package/src/utils/dynamicSvgImport.ts

@@ -0,0 +1,5 @@
+export function dynamicSvgImport(iconName: string) {
+    return import(
+        `../../node_modules/@dataloop-ai/icons/assets/${iconName}.svg`
+    ).then((d) => d.default)
+}