fix(source): external svg theming (#192)

* allow include of external svgs without breaking theming * 3.0.77 * 3.0.78 * fixed LocateControl and added react-inlinesvg to external dependencies * theming toast close button * fixed typing * theming search resuts * theming search resuts * theming search resuts * theming donation widget * theming donation widget --------- Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
2025-12-12 23:36:00 +00:00 · 2025-03-19 23:28:04 +00:00 · 2025-03-19 23:28:04 +00:00 · 4fc9516715
commit 4fc9516715
parent 8b7cff2b32
12 changed files with 73 additions and 24 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "utopia-ui",
-  "version": "3.0.76",
+  "version": "3.0.78",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "utopia-ui",
-      "version": "3.0.76",
+      "version": "3.0.78",
      "license": "GPL-3.0-only",
      "dependencies": {
        "@heroicons/react": "^2.0.17",
@ -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",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "utopia-ui",
-  "version": "3.0.76",
+  "version": "3.0.78",
  "description": "Reuseable React Components to build mapping apps for real life communities and networks",
  "repository": "https://github.com/utopia-os/utopia-ui",
  "homepage": "https://utopia-os.org/",
@ -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",
--- a/rollup.config.js
+++ b/rollup.config.js
@ -76,6 +76,7 @@ export default [
      'leaflet.locatecontrol/dist/L.Control.Locate.css',
      'yet-another-react-lightbox',
      'react-photo-album',
+      'react-inlinesvg',
    ],
  },
  {
--- a/src/Components/AppShell/ContextWrapper.tsx
+++ b/src/Components/AppShell/ContextWrapper.tsx
@ -15,9 +15,20 @@ import { TagsProvider } from '#components/Map/hooks/useTags'

 import { AppStateProvider } from './hooks/useAppState'

+import type { CloseButtonProps } from 'react-toastify'
+
 // Helper context to determine if the ContextWrapper is already present.
 const ContextCheckContext = createContext(false)

+const CloseButton = ({ closeToast }: CloseButtonProps) => (
+  <button
+    className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2 focus:tw-outline-none'
+    onClick={closeToast}
+  >
+    ✕
+  </button>
+)
+
 export const ContextWrapper = ({ children }: { children: React.ReactNode }) => {
  const isWrapped = useContext(ContextCheckContext)

@ -67,6 +78,7 @@ export const Wrappers = ({ children }) => {
                            draggable
                            pauseOnHover
                            theme='light'
+                            closeButton={CloseButton}
                          />
                          {children}
                        </QuestsProvider>
--- 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'
--- 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(
--- 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>
--- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
@ -6,6 +6,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { control } from 'leaflet'
 import { useEffect, useRef, useState } from 'react'
+import SVG from 'react-inlinesvg'
 import { useMap, useMapEvents } from 'react-leaflet'

 import TargetSVG from '#assets/target.svg'
@ -58,9 +59,8 @@ export const LocateControl = () => {
          {loading ? (
            <span className='tw-loading tw-loading-spinner tw-loading-md tw-mt-1'></span>
          ) : (
-            <img
+            <SVG
              src={TargetSVG}
-              alt='x'
              className='tw-mt-1 tw-p-[1px]'
              style={{ fill: `${active ? '#fc8702' : 'currentColor'}` }}
            />
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@ -15,6 +15,7 @@ import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon
 import axios from 'axios'
 import { LatLng, LatLngBounds, marker } from 'leaflet'
 import { useEffect, useRef, useState } from 'react'
+import SVG from 'react-inlinesvg'
 import { useMap, useMapEvents } from 'react-leaflet'
 import { useLocation, useNavigate } from 'react-router-dom'

@ -169,7 +170,7 @@ export const SearchControl = () => {
              {itemsResults.slice(0, 5).map((item) => (
                <div
                  key={item.id}
-                  className='tw-cursor-pointer hover:tw-font-bold'
+                  className='tw-cursor-pointer hover:tw-font-bold tw-flex tw-flex-row'
                  onClick={() => {
                    const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1]
                      .marker
@ -182,18 +183,25 @@ export const SearchControl = () => {
                    }
                  }}
                >
-                  <div className='tw-flex tw-flex-row'>
-                    <img
-                      src={item.layer?.menuIcon}
-                      className='tw-text-current tw-w-5 tw-mr-2 tw-mt-0'
+                  {item.layer?.menuIcon ? (
+                    <SVG
+                      src={item.layer.menuIcon}
+                      className='tw-text-current tw-mr-2 tw-mt-0 tw-w-5'
+                      preProcessor={(code: string): string => {
+                        code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
+                        code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
+                        return code
+                      }}
                    />
-                    <div>
-                      <div className='tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
-                        {item.name}
-                      </div>
-                      <div className='tw-text-xs tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
-                        {item.text}
-                      </div>
+                  ) : (
+                    <div className='tw-w-5' />
+                  )}
+                  <div>
+                    <div className='tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                      {item.name}
+                    </div>
+                    <div className='tw-text-xs tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                      {item.text}
                    </div>
                  </div>
                </div>
@ -236,7 +244,7 @@ export const SearchControl = () => {
                    hide()
                  }}
                >
-                  <MagnifyingGlassIcon className='tw-text-current tw-mr-2 tw-mt-0 tw-w-4' />
+                  <MagnifyingGlassIcon className='tw-text-current tw-mr-2 tw-mt-0 tw-w-5' />
                  <div>
                    <div className='tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
                      {geo?.properties.name ? geo?.properties.name : value}
--- 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>
                    )}
--- a/src/Components/Map/UtopiaMapInner.tsx
+++ b/src/Components/Map/UtopiaMapInner.tsx
@ -75,10 +75,12 @@ export function UtopiaMapInner({
              <div>
                <TextView
                  itemId=''
-                  rawText={'Support us building free opensource maps and help us grow 🌱☀️'}
+                  rawText={
+                    'Support us building free opensource maps for communities and help us grow 🌱☀️'
+                  }
                />
                <a href='https://opencollective.com/utopia-project'>
-                  <div className='tw-btn tw-btn-sm tw-float-right'>Donate</div>
+                  <div className='tw-btn  tw-btn-sm tw-float-right tw-btn-primary'>Donate</div>
                </a>
              </div>
            </>,
--- a/src/assets/target.svg
+++ b/src/assets/target.svg
@ -5,4 +5,4 @@
    xmlns='http://www.w3.org/2000/svg'
 >
  <path d='M30 14.75h-2.824c-0.608-5.219-4.707-9.318-9.874-9.921l-0.053-0.005v-2.824c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.824c-5.219 0.608-9.318 4.707-9.921 9.874l-0.005 0.053h-2.824c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.824c0.608 5.219 4.707 9.318 9.874 9.921l0.053 0.005v2.824c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.824c5.219-0.608 9.318-4.707 9.921-9.874l0.005-0.053h2.824c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0zM17.25 24.624v-2.624c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.624c-3.821-0.57-6.803-3.553-7.368-7.326l-0.006-0.048h2.624c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0h-2.624c0.57-3.821 3.553-6.804 7.326-7.368l0.048-0.006v2.624c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.624c3.821 0.57 6.803 3.553 7.368 7.326l0.006 0.048h-2.624c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.624c-0.571 3.821-3.553 6.803-7.326 7.368l-0.048 0.006z'></path>
-</svg>
+</svg>