@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.7 → 7.12.6-EPDM-7951.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.12.6-EPDM-7951.7",
+  "version": "7.12.6-EPDM-7951.9",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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: {
@@ -102,29 +103,11 @@ const IconImage = styled.div`
 
 const icon = reactive({ html: '' })
 
-const loadSvg = async (fileName = props.name) => {
-  const _fileName = fileName.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 fetchResponse = await fetch(fetchUrl)
-    icon.html = await fetchResponse.text()
-  } catch (error) {
-    console.error(`Failed to load ${props.name}.svg`)
-  }
+const loadSvg = async () => {
+  icon.html = await fetchIcon(props.name.toLowerCase())
 }
 
-onMounted(async () => {
-  const iconPath = `../../assets/svgIcons/${props.name.toLowerCase()}.svg?raw`
-  const module = await import(/* @vite-ignore */ iconPath)
-  console.log(module.default)
-  icon.html = module.default
-})
-
-// onMounted(() => loadSvg())
+onMounted(() => loadSvg())
 
 watch(() => props.name, loadSvg)
 </script>