From 0c640e78efb7e3ca7cd30beefcffcb8f62e6c7e6 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Wed, 19 Mar 2025 11:34:22 +0000
Subject: [PATCH] allow include of external svgs without breaking theming

---
 package-lock.json                             | 20 +++++++++++++++++++
 package.json                                  |  1 +
 src/Components/AppShell/index.tsx             |  1 +
 .../Map/Subcomponents/AddButton.tsx           |  4 +++-
 .../Subcomponents/Controls/LayerControl.tsx   |  3 ++-
 .../ItemPopupComponents/HeaderView.tsx        |  3 ++-
 6 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9ae9d72a..45a6960d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "radash": "^12.1.0",
         "react-colorful": "^5.6.1",
         "react-image-crop": "^10.1.8",
+        "react-inlinesvg": "^4.2.0",
         "react-leaflet": "^4.2.1",
         "react-leaflet-cluster": "^2.1.0",
         "react-markdown": "^9.0.1",
@@ -10203,6 +10204,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-from-dom": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.7.5.tgz",
+      "integrity": "sha512-CO92PmMKo/23uYPm6OFvh5CtZbMgHs/Xn+o095Lz/TZj9t8DSDhGdSOMLxBxwWI4sr0MF17KUn9yJWc5Q00R/w==",
+      "peerDependencies": {
+        "react": "16.8 - 19"
+      }
+    },
     "node_modules/react-image-crop": {
       "version": "10.1.8",
       "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz",
@@ -10212,6 +10221,17 @@
         "react": ">=16.13.1"
       }
     },
+    "node_modules/react-inlinesvg": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.2.0.tgz",
+      "integrity": "sha512-V59P6sFU7NACIbvoay9ikYKVFWyIIZFGd7w6YT1m+H7Ues0fOI6B6IftE6NPSYXXv7RHVmrncIyJeYurs3OJcA==",
+      "dependencies": {
+        "react-from-dom": "^0.7.5"
+      },
+      "peerDependencies": {
+        "react": "16.8 - 19"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 04d945c3..7c779986 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
     "radash": "^12.1.0",
     "react-colorful": "^5.6.1",
     "react-image-crop": "^10.1.8",
+    "react-inlinesvg": "^4.2.0",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
     "react-markdown": "^9.0.1",
diff --git a/src/Components/AppShell/index.tsx b/src/Components/AppShell/index.tsx
index d0c058df..7f27e9d5 100644
--- a/src/Components/AppShell/index.tsx
+++ b/src/Components/AppShell/index.tsx
@@ -1,3 +1,4 @@
 export * from './AppShell'
 export { SideBar } from './SideBar'
 export { Content } from './Content'
+export { default as SVG } from 'react-inlinesvg'
diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx
index c2de677b..c1a46a54 100644
--- a/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/src/Components/Map/Subcomponents/AddButton.tsx
@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import SVG from 'react-inlinesvg'
+
 import PlusSVG from '#assets/plus.svg'
 import { useLayers } from '#components/Map/hooks/useLayers'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
@@ -31,7 +33,7 @@ export default function AddButton({
       {canAddItems() ? (
         <div className='tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw-z-500 tw-absolute tw-right-4 tw-bottom-4'>
           <label tabIndex={0} className='tw-z-500 tw-btn tw-btn-circle tw-shadow tw-bg-base-100'>
-            <img src={PlusSVG} alt='Layers' className='tw-h-5 tw-w-5' />
+            <SVG src={PlusSVG} className='tw-h-5 tw-w-5' />
           </label>
           <ul tabIndex={0} className='tw-dropdown-content tw-pr-1 tw-list-none'>
             {layers.map(
diff --git a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
index 0150409a..69abc40a 100644
--- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import SVG from 'react-inlinesvg'
 
 import LayerSVG from '#assets/layer.svg'
 import { useIsLayerVisible, useToggleVisibleLayer } from '#components/Map/hooks/useFilter'
@@ -56,7 +57,7 @@ export function LayerControl() {
             setOpen(true)
           }}
         >
-          <img src={LayerSVG} alt='Layers' />
+          <SVG src={LayerSVG} />
         </div>
       )}
     </div>
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index 69f7569e..58690d84 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -13,6 +13,7 @@ import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon
 import PencilIcon from '@heroicons/react/24/solid/PencilIcon'
 import TrashIcon from '@heroicons/react/24/solid/TrashIcon'
 import { useState } from 'react'
+import SVG from 'react-inlinesvg'
 import { useNavigate } from 'react-router-dom'
 
 import TargetDotSVG from '#assets/targetDot.svg'
@@ -159,7 +160,7 @@ export function HeaderView({
                           className='!tw-text-base-content tw-cursor-pointer'
                           onClick={setPositionCallback}
                         >
-                          <img src={TargetDotSVG} alt='Position' className='tw-w-5 tw-h-5' />
+                          <SVG src={TargetDotSVG} className='tw-w-5 tw-h-5' />
                         </a>
                       </li>
                     )}