@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.8 → 7.12.6-EPDM-7951.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.12.6-EPDM-7951.8",
+  "version": "7.12.6-EPDM-7951.10",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -20,6 +20,9 @@
     "vue": "3.3.4",
     "vue3-styled-components": "1.2.1"
   },
+  "peerDependencies": {
+    "vuedraggable": "4.1.0"
+  },
   "devDependencies": {
     "@babel/core": "7.12.16",
     "@babel/eslint-parser": "7.12.16",

package/src/components/icon/iconCache.js

@@ -0,0 +1,23 @@
+const iconCache = {}
+
+export const fetchIcon = async (fileName) => {
+  if (iconCache[fileName]) {
+    return iconCache[fileName]
+  }
+
+  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
+  const fetchUrl = new URL(
+    `../../assets/svgIcons/${fileName}.svg`,
+    import.meta.url
+  ).href
+
+  try {
+    const response = await fetch(fetchUrl)
+    const rawFile = await response.text()
+    iconCache[fileName] = rawFile
+
+    return rawFile
+  } catch (error) {
+    console.error(`Failed to load ${fileName}.svg`)
+  }
+}

package/src/components/icon/index.vue

@@ -21,6 +21,7 @@
 
 import { onMounted, reactive, watch } from 'vue'
 import styled from 'vue3-styled-components'
+import { fetchIcon } from './iconCache'
 
 const props = defineProps({
   disabled: {
@@ -103,18 +104,7 @@ const IconImage = styled.div`
 const icon = reactive({ html: '' })
 
 const loadSvg = async () => {
-  const fileName = props.name.toLowerCase()
-  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
-  const fetchUrl = new URL(
-    `../../assets/svgIcons/${fileName}.svg`,
-    import.meta.url
-  ).href
-  try {
-    const response = await fetch(fetchUrl)
-    icon.html = await response.text()
-  } catch (_) {
-    console.error(`Failed to load ${props.name}.svg`)
-  }
+  icon.html = await fetchIcon(props.name.toLowerCase())
 }
 
 onMounted(() => loadSvg())