User can set custom icon from relative path

apps/sensenet/src/components/Icon.tsx

@@ -60,6 +60,7 @@ import travisCi from '@iconify-icons/logos/travis-ci'
 import vercelIcon from '@iconify-icons/logos/vercel-icon'
 import React, { CSSProperties, FunctionComponent } from 'react'
 import { EventLogEntry } from '../services/EventService'
+import { IconFromPath } from './IconFromPath'
 import { UserAvatar } from './UserAvatar'
 
 export interface IconOptions {
@@ -183,9 +184,19 @@ const getIconByName = (name: string | undefined, options: IconOptions) => {
   }
 }
 
-/* eslint-disable react/display-name */
+const getIconByPath = (icon: string | undefined, options: IconOptions) => {
+  if (!icon || !icon.startsWith('/')) {
+    return null
+  }
+
+  return <IconFromPath path={icon} options={options} />
+}
 
+/* eslint-disable react/display-name */
 export const defaultContentResolvers: Array<IconResolver<GenericContent>> = [
+  {
+    get: (item, options) => getIconByPath(item.Icon, options),
+  },
   {
     get: (item, options) =>
       options.repo.schemas.isContentFromType<User>(item, 'User') ? (

apps/sensenet/src/components/IconFromPath.tsx

@@ -0,0 +1,48 @@
+import { PathHelper } from '@sensenet/client-utils'
+import React, { memo, useEffect, useState } from 'react'
+import { IconOptions } from './Icon'
+
+const IconFromPath = ({ path, options }: { path: string; options: IconOptions }) => {
+  const [icon, setIcon] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchData() {
+      if (options.repo.iconCache.has(path)) {
+        const cachedData = options.repo.iconCache.get(path) ?? ''
+        setIcon(cachedData)
+        return
+      }
+
+      const imageUrl = PathHelper.joinPaths(options.repo.configuration.repositoryUrl, path)
+
+      if (path.endsWith('.svg')) {
+        const fetchedSvg = await options.repo.fetch(imageUrl, { cache: 'force-cache' })
+        if (!fetchedSvg.ok) {
+          return
+        }
+        const svg = await fetchedSvg.text().catch(() => '')
+        options.repo.iconCache.set(path, svg)
+        setIcon(svg)
+        return
+      }
+
+      options.repo.iconCache.set(path, imageUrl)
+      setIcon(imageUrl)
+    }
+    fetchData()
+  }, [options.repo, path])
+
+  if (!icon) {
+    return null
+  }
+
+  if (path.endsWith('.svg')) {
+    return <span dangerouslySetInnerHTML={{ __html: icon }} />
+  }
+
+  return <img src={icon} alt="icon" style={options.style} />
+}
+
+const memoIzedIconFromPath = memo(IconFromPath)
+
+export { memoIzedIconFromPath as IconFromPath }

packages/sn-client-core/src/Repository/Repository.ts

@@ -500,6 +500,8 @@ export class Repository implements Disposable {
     this.schemas.setSchemas(schemas)
   }
 
+  public iconCache = new Map<string, string>()
+
   constructor(
     config?: RepositoryConfiguration,
     private fetchMethod: WindowOrWorkerGlobalScope['fetch'] = window && window.fetch && window.fetch.bind(window),