icons fixes

Author: NoelKova

apps/sensenet/src/components/IconFromPath.tsx

@@ -1,4 +1,3 @@
-import { PathHelper } from '@sensenet/client-utils'
 import React, { memo, useEffect, useState } from 'react'
 import { IconOptions } from './Icon'
 
@@ -10,56 +9,56 @@ type IconFromPathProps = {
 }
 
 const IconFromPathComponent = ({ path, options, contentPath, contentType }: IconFromPathProps) => {
-  const [icon, setIcon] = useState<string | null>(null)
+  const [iconUrlOrSvg, setIconUrlOrSvg] = useState<string | null>(null)
+  const [isInlineSvg, setIsInlineSvg] = useState(false)
 
   useEffect(() => {
     const loadIcon = async () => {
-      let svgPath = path
+      const fileName = path.split('/').pop() || ''
+      let svgPath = `/icons/${fileName}`
 
       if (contentType.toLowerCase().endsWith('file')) {
         if (contentPath.toLowerCase().endsWith('.csv')) {
           svgPath = '/icons/csv.svg'
         } else if (contentPath.toLowerCase().endsWith('.svg')) {
           svgPath = '/icons/file_img.svg'
         }
-      } else {
-        const fileName = path.split('/').pop()
-        if (fileName) {
-          svgPath = `/icons/${fileName}`
-        }
       }
 
+      // For SVGs, fetch and inline them
       if (svgPath.endsWith('.svg')) {
         try {
-          const response = await options.repo.fetch(svgPath, { cache: 'force-cache' })
+          const response = await fetch(svgPath, {
+            cache: 'no-store',
+          })
           if (!response.ok) return
-
           const svgText = await response.text()
           const resizedSvg = svgText
             .replace('width=', 'width="24px" oldwidth=')
             .replace('height=', 'height="24px" oldheight=')
 
-          options.repo.iconCache.set(path, resizedSvg)
-          setIcon(resizedSvg)
+          setIsInlineSvg(true)
+          setIconUrlOrSvg(resizedSvg)
         } catch (e) {
-          console.warn('Failed to load SVG icon:', e)
+          console.warn('Failed to load SVG:', e)
         }
         return
       }
 
-      setIcon(svgPath)
-      options.repo.iconCache.set(path, svgPath)
+      // For non-SVG fallback
+      setIconUrlOrSvg(svgPath)
+      setIsInlineSvg(false)
     }
 
     loadIcon()
-  }, [path, contentPath, contentType, options.repo])
+  }, [path, contentPath, contentType])
 
-  if (!icon) return null
+  if (!iconUrlOrSvg) return null
 
-  return path.endsWith('.svg') ? (
-    <span dangerouslySetInnerHTML={{ __html: icon }} style={options.style} className="svgicon" />
+  return isInlineSvg ? (
+    <span dangerouslySetInnerHTML={{ __html: iconUrlOrSvg }} style={options.style} className="svgicon" />
   ) : (
-    <img src={icon} alt="icon" style={options.style} />
+    <img src={iconUrlOrSvg} alt="icon" style={options.style} />
   )
 }