reduce coverage further

* support for svg files

Support to load svg files and include them as bas64 encoded images in
the bundle.

* navbar svgs

* replace NavBar SVGs with heroicons

* layercontrol icons

* lint fix

* quest - questionmark

* plusbutton - plus

* linkeditem - elipse-vertical - link-slash

* contactinfo - envelope & phone

* avatar - arrow-up-tray

* ActionButton - link & plus

* StartEndView - calendar x2

* HeaderView - ellipse-vertical & pencil & trash

* SidebarControl - bars-3

* SearchControl - flag & magnifying-glass

* GratitudeControl - heart

* FilterControl - funnel

* AddButton - plus

* reduce test coverage requirements

* remove wrongfully commit dummy svg

* updated obsolete package.lock

* migrate more svgs from code to file, use hero icons where it seems applicable

* moved share icons to subfolder

* fixed layout

---------

Co-authored-by: Anton Tranelis <mail@antontranelis.de>

package-lock.json

@@ -68,7 +68,6 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "rollup": "^4.34.6",
-        "rollup-plugin-commonjs": "^10.1.0",
         "rollup-plugin-dts": "^6.1.1",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-svg": "^2.0.0",
@@ -7038,16 +7037,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-reference": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
-      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "*"
-      }
-    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -10658,41 +10647,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/rollup-plugin-commonjs": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz",
-      "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==",
-      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs.",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "estree-walker": "^0.6.1",
-        "is-reference": "^1.1.2",
-        "magic-string": "^0.25.2",
-        "resolve": "^1.11.0",
-        "rollup-pluginutils": "^2.8.1"
-      },
-      "peerDependencies": {
-        "rollup": ">=1.12.0"
-      }
-    },
-    "node_modules/rollup-plugin-commonjs/node_modules/estree-walker": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
-      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/rollup-plugin-commonjs/node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "sourcemap-codec": "^1.4.8"
-      }
-    },
     "node_modules/rollup-plugin-dts": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/rollup-plugin-dts/-/rollup-plugin-dts-6.1.1.tgz",
@@ -11172,14 +11126,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/space-separated-tokens": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",

package.json

@@ -73,7 +73,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.34.6",
-    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",

rollup.config.js

@@ -7,7 +7,6 @@ import typescript from '@rollup/plugin-typescript'
 import { dts } from 'rollup-plugin-dts'
 import postcss from 'rollup-plugin-postcss'
 import svg from 'rollup-plugin-svg'
-import commonjs from 'rollup-plugin-commonjs';
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -43,12 +42,6 @@ export default [
         tsconfig: './tsconfig.json',
       }),
       svg({ base64: true }),
-      commonjs({
-        namedExports: {
-          // this is needed for the MarkerIconFactory construct
-          'react-dom/server': ['renderToString'],
-        },
-      }),
     ],
     external: [
       'react',

src/Components/AppShell/NavBar.tsx

@@ -1,5 +1,5 @@
-import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon'
-import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon'
+import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
+import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
 import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
 import { useEffect, useRef, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
@@ -70,7 +70,7 @@ export default function NavBar({ appName }: { appName: string }) {
             aria-controls='#sidenav'
             aria-haspopup='true'
           >
-            <Bars3Icon className='tw-inline-block tw-w-5 tw-h-5 tw-stroke-current' />
+            <Bars3Icon className='tw-inline-block tw-w-5 tw-h-5' />
           </button>
           <div className='tw-flex-1 tw-mr-2'>
             <div

src/Components/Map/Subcomponents/AddButton.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import PlusIcon from '@heroicons/react/24/outline/PlusIcon'
-
+import PlusSVG from '#assets/plus.svg'
 import { useLayers } from '#components/Map/hooks/useLayers'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
 
@@ -32,7 +31,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'>
-            <PlusIcon className='tw-w-5 tw-h-5' />
+            <img src={PlusSVG} alt='Layers' className='tw-h-5 tw-w-5' />
           </label>
           <ul tabIndex={0} className='tw-dropdown-content tw-pr-1 tw-list-none'>
             {layers.map(

src/Components/Map/Subcomponents/Controls/FilterControl.tsx

@@ -72,7 +72,7 @@ export function FilterControl() {
               setOpen(true)
             }}
           >
-            <FunnelIcon className='size-6' />
+            <FunnelIcon className='size-6 tw-stroke-[2.5]' />
           </div>
         </div>
       )}

src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx

@@ -17,7 +17,7 @@ export const GratitudeControl = () => {
               navigate('/select-user')
             }}
           >
-            <HeartIcon />
+            <HeartIcon className='tw-stroke-[2.5]' />
           </div>
         }
       </div>

src/Components/Map/Subcomponents/Controls/LayerControl.tsx

@@ -56,7 +56,7 @@ export function LayerControl() {
             setOpen(true)
           }}
         >
-          <img src={LayerSVG} alt='Layers' className='tw-h-100 tw-w-100' />
+          <img src={LayerSVG} alt='Layers' />
         </div>
       )}
     </div>

src/Components/Map/Subcomponents/Controls/QuestControl.tsx

@@ -1,5 +1,4 @@
-import HandRaisedIcon from '@heroicons/react/24/outline/HandRaisedIcon'
-
+import FistSVG from '#assets/fist.svg'
 import { useQuestsOpen, useSetQuestOpen } from '#components/Gaming/hooks/useQuests'
 
 export function QuestControl() {
@@ -19,7 +18,7 @@ export function QuestControl() {
             className='tw-card-body hover:tw-bg-slate-300 tw-rounded-2xl tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer'
             onClick={() => setQuestsOpen(true)}
           >
-            <HandRaisedIcon />
+            <img src={FistSVG} alt='Quests' className='tw-h-[2em]' />
           </div>
         </div>
       )}

src/Components/Map/Subcomponents/Controls/SidebarControl.tsx

@@ -1,4 +1,4 @@
-import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon'
+import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
 
 // Converts leaflet.locatecontrol to a React Component
 export const SidebarControl = () => {
@@ -13,7 +13,7 @@ export const SidebarControl = () => {
             aria-controls='#sidenav'
             aria-haspopup='true'
           >
-            <Bars3Icon className='tw-inline-block tw-w-5 tw-h-5 tw-stroke-current' />
+            <Bars3Icon className='tw-inline-block tw-w-5 tw-h-5' />
           </button>
         </div>
       </div>

src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx

@@ -9,9 +9,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon'
-import PencilIcon from '@heroicons/react/24/outline/PencilIcon'
-import TrashIcon from '@heroicons/react/24/outline/TrashIcon'
+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, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 

src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-import CalendarIcon from '@heroicons/react/24/outline/CalendarIcon'
+import CalendarIcon from '@heroicons/react/24/solid/CalendarDaysIcon'
 
 import type { Item } from '#types/Item'
 

src/Components/Map/UtopiaMap.css

@@ -40,56 +40,63 @@
     position: relative;
     top: -35px;
     left: 10px;
-    width: 13px;
+    width: 13px !important;
   }
   
   .user-icon {
     position: relative;
     top: -36px;
     left: 10px;
-    width: 13px;
+    width: 13px  !important;
+  }
+
+  .point-icon {
+    position: relative;
+    top: -33px;
+    left: 9px;
+    width: 14px !important;
   }
 
   .circle-icon {
     position: relative;
     top: -33px;
     left: 10px;
-    width: 13px;
+    width: 13px !important;
   }
 
   .fire-icon {
     position: relative;
     top: -36px;
     left: 10px;
-    width: 13px;
+    width: 13px  !important;
   }
 
   .tree-icon {
     position: relative;
     top: -38px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   .music-icon {
     position: relative;
     top: -35px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   .quest-icon {
     position: relative;
     top: -34px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   .drum-icon {
     position: relative;
     top: -38px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   
@@ -97,63 +104,63 @@
     position: relative;
     top: -36.5px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   .group-icon {
     position: relative;
     top: -37px;
-    left: 4px;
-    width: 24px;
+    left: 5px;
+    width: 22px !important;
   }
 
   .liebevoll-jetzt-icon{
     position: relative;
     top: -35px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   .staff-snake-icon {
     position: relative;
     top: -35px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   .flower-icon {
     position: relative;
     top: -35px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
   
   .network-icon {
     position: relative;
     top: -35px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   .shop-icon {
     position: relative;
     top: -34px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   .plant-icon {
     position: relative;
     top: -34px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
 
   .circle-dot-icon {
     position: relative;
     top: -36px;
     left: 4px;
-    width: 24px;
+    width: 24px !important;
   }
   
   .leaflet-popup-scrolled {

src/Components/Profile/Subcomponents/ActionsButton.tsx

@@ -67,7 +67,7 @@ export function ActionButton({
                   color: '#fff',
                 }}
               >
-                <LinkIcon className='tw-h-5 tw-w-5' />
+                <LinkIcon className='tw-h-5 tw-w-5 tw-stroke-[2.5]' />
               </button>
             )}
             {triggerAddButton && (
@@ -82,7 +82,7 @@ export function ActionButton({
                   color: '#fff',
                 }}
               >
-                <PlusIcon className='tw-w-5 tw-h-5' />
+                <PlusIcon className='tw-w-5 tw-h-5 tw-stroke-[2.5]' />
               </button>
             )}
           </div>

src/Components/Profile/Subcomponents/AvatarWidget.tsx

@@ -3,10 +3,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 import ArrowUpTrayIcon from '@heroicons/react/24/outline/ArrowUpTrayIcon'
-import UserIcon from '@heroicons/react/24/outline/UserIcon'
 import { useState, useCallback, useRef } from 'react'
 import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop'
 
+import UserSVG from '#assets/user.svg'
 import { useAppState } from '#components/AppShell/hooks/useAppState'
 import 'react-image-crop/dist/ReactCrop.css'
 import DialogModal from '#components/Templates/DialogModal'
@@ -182,10 +182,7 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
             </div>
           ) : (
             <div className='tw-h-20 tw-w-20'>
-              <UserIcon
-                className='tw-w-20 tw-h-20 tw-rounded-full'
-                style={{ backgroundColor: '#eee' }}
-              />
+              <img src={UserSVG} className='tw-rounded-full'></img>
             </div>
           )}
         </label>

src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx

@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 
-import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon'
+import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
 import LinkSlashIcon from '@heroicons/react/24/outline/LinkSlashIcon'
 import { useEffect } from 'react'
 
@@ -74,7 +74,7 @@ export function LinkedItemsHeaderView({
                       {loading ? (
                         <span className='tw-loading tw-loading-spinner tw-loading-sm'></span>
                       ) : (
-                        <LinkSlashIcon className='tw-h-5 tw-w-5' />
+                        <LinkSlashIcon className='tw-h-5 tw-w-5 tw-stroke-[3]' />
                       )}
                     </a>
                   </li>

src/Components/Profile/Subcomponents/MarkdownHint.tsx

@@ -10,7 +10,7 @@ export const MarkdownHint = () => {
       title='Markdown is supported'
       className='flex tw-flex-row tw-text-gray-400 tw-cursor-pointer tw-items-center'
     >
-      <img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown' />
+      <img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown tw-gray-400' />
       {expended && (
         <a
           href='https://www.markdownguide.org/cheat-sheet/#basic-syntax'

src/Components/Profile/Subcomponents/PlusButton.tsx

@@ -30,7 +30,7 @@ export function PlusButton({
             }}
             style={{ backgroundColor: color, color: '#fff' }}
           >
-            <PlusIcon className='tw-w-5 tw-h-5' />
+            <PlusIcon className='tw-w-5 tw-h-5 tw-stroke-[2.5]' />
           </button>
         </div>
       )}

src/Components/Profile/Subcomponents/SocialShareBar.tsx

@@ -1,7 +1,7 @@
-import ClipboardDocumentIcon from '@heroicons/react/24/outline/ClipboardDocumentIcon'
 import { toast } from 'react-toastify'
 
 import ChevronSVG from '#assets/chevron.svg'
+import ClipboardSVG from '#assets/share/clipboard.svg'
 
 import SocialShareButton from './SocialShareButton'
 
@@ -58,7 +58,7 @@ const SocialShareBar = ({
           onClick={() => copyLink()}
           title='copy Link'
         >
-          <ClipboardDocumentIcon />
+          <img src={ClipboardSVG} className='tw-w-5' />
         </div>
       )}
     </div>

src/Utils/MarkerIconFactory.ts

@@ -1,5 +1,4 @@
 import { divIcon, Point } from 'leaflet'
-import { renderToString } from 'react-dom/server'
 
 import CalendarSVG from '#assets/icons/calendar.svg'
 import CannabisSVG from '#assets/icons/cannabis.svg'
@@ -25,43 +24,35 @@ import UserSVG from '#assets/icons/user.svg'
 const createSvg = (shape: string, markerColor: string, borderColor: string) => {
   switch (shape) {
     case 'circle':
-      return (
-        <svg width='32' height='44' viewBox='0 0 35 45' xmlns='http://www.w3.org/2000/svg'>
-          <path
-            d='M17.5 2.746c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.439-17.863.056-.08a15.422 15.422 0 002.343-6.112c.123-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307'
-            fill={markerColor}
+      return `<svg width='32' height='44' viewBox='0 0 35 45' xmlns='http://www.w3.org/2000/svg'>
+          <path 
+            d='M17.5 2.746c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.439-17.863.056-.08a15.422 15.422 0 002.343-6.112c.123-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307' \
+            fill='${markerColor}'
           />
           <path
             d='M17.488 2.748c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.44-17.863.055-.08a15.422 15.422 0 002.343-6.112c.124-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307m0 1.071c7.68 0 13.929 6.386 13.929 14.236 0 .685-.064 1.423-.193 2.258-.325 2.075-1.059 3.99-2.164 5.667l-.055.078-11.557 16.595L6.032 26.14l-.12-.174a14.256 14.256 0 01-2.105-5.29 14.698 14.698 0 01-.247-2.62c0-7.851 6.249-14.237 13.928-14.237'
-            fill="' +
-      borderColor +
-      '"
+            fill='${borderColor}'
             opacity='1'
           />
-        </svg>
-      )
-
+        </svg>`
     case 'square':
-      return (
-        <svg width='33' height='44' viewBox='0 0 35 45' xmlns='http://www.w3.org/2000/svg'>
+      return `<svg width='33' height='44' viewBox='0 0 35 45' xmlns='http://www.w3.org/2000/svg'>
           <path
             d='M28.205 3.217H6.777c-2.367 0-4.286 1.87-4.286 4.179v19.847c0 2.308 1.919 4.179 4.286 4.179h5.357l5.337 13.58 5.377-13.58h5.357c2.366 0 4.285-1.87 4.285-4.179V7.396c0-2.308-1.919-4.179-4.285-4.179'
-            fill={markerColor}
+            fill=${markerColor}
           />
           <g opacity='1' transform='matrix(1.0714 0 0 -1.0714 -233.22 146.783)'>
             <path
               d='M244 134h-20c-2.209 0-4-1.746-4-3.9v-18.525c0-2.154 1.791-3.9 4-3.9h5L233.982 95 239 107.675h5c2.209 0 4 1.746 4 3.9V130.1c0 2.154-1.791 3.9-4 3.9m0-1c1.654 0 3-1.301 3-2.9v-18.525c0-1.599-1.346-2.9-3-2.9h-5.68l-.25-.632-4.084-10.318-4.055 10.316-.249.634H224c-1.654 0-3 1.301-3 2.9V130.1c0 1.599 1.346 2.9 3 2.9h20'
-              fill={borderColor}
+              fill=${borderColor}
             />
           </g>
-        </svg>
-      )
+        </svg>`
     case 'star':
-      return (
-        <svg width='34' height='44' viewBox='0 0 35 45' xmlns='http://www.w3.org/2000/svg'>
+      return `<svg width='34' height='44' viewBox='0 0 35 45' xmlns='http://www.w3.org/2000/svg'>
           <path
             d='M32.92 16.93l-3.525-3.525V8.419a1.983 1.983 0 00-1.983-1.982h-4.985L18.9 2.91a1.984 1.984 0 00-2.803 0l-3.524 3.526H7.588a1.983 1.983 0 00-1.982 1.982v4.986L2.081 16.93a1.982 1.982 0 000 2.803l3.525 3.526v4.984c0 1.096.888 1.983 1.982 1.983h4.986L17.457 45l4.97-14.773h4.985a1.983 1.983 0 001.983-1.983V23.26l3.525-3.526a1.982 1.982 0 000-2.803'
-            fill={markerColor}
+            fill=${markerColor}
           />
           <g opacity='.15' transform='matrix(1.0667 0 0 -1.0667 -347.3 97.26)'>
             <path
@@ -69,11 +60,9 @@ const createSvg = (shape: string, markerColor: string, borderColor: string) => {
               fill='#231f20'
             />
           </g>
-        </svg>
-      )
+        </svg>`
     case 'penta':
-      return (
-        <svg width='33' height='44' viewBox='0 0 35 45' xmlns='http://www.w3.org/2000/svg'>
+      return `<svg width='33' height='44' viewBox='0 0 35 45' xmlns='http://www.w3.org/2000/svg'>
           <path d='M1.872 17.35L9.679 2.993h15.615L33.1 17.35 17.486 44.992z' fill={markerColor} />
           <g opacity='.15' transform='matrix(1.0769 0 0 -1.0769 -272.731 48.23)'>
             <path
@@ -81,63 +70,67 @@ const createSvg = (shape: string, markerColor: string, borderColor: string) => {
               fill='#231f20'
             />
           </g>
-        </svg>
-      )
+        </svg>`
     default:
-      return <></>
+      return ''
   }
 }
 
 const addIcon = (icon: string) => {
   switch (icon) {
     case 'point':
-      return <img src={PointSVG} alt='x' />
+      return PointSVG
     case 'calendar':
-      return <img src={CalendarSVG} alt='x' />
+      return CalendarSVG
     case 'user':
-      return <img src={UserSVG} alt='x' />
+      return UserSVG
     case 'fire':
-      return <img src={FireSVG} alt='x' />
+      return FireSVG
     case 'tree':
-      return <img src={TreeSVG} alt='x' />
+      return TreeSVG
     case 'music':
-      return <img src={MusicSVG} alt='x' />
+      return MusicSVG
     case 'drum':
-      return <img src={DrumSVG} alt='x' />
+      return DrumSVG
     case 'quest':
-      return <img src={QuestSVG} alt='x' />
+      return QuestSVG
     case 'compass':
-      return <img src={CompassSVG} alt='x' />
+      return CompassSVG
     case 'liebevoll.jetzt':
-      return <img src={LiebevollJetztSVG} alt='x' />
+      return LiebevollJetztSVG
     case 'group':
-      return <img src={GroupSVG} alt='x' />
+      return GroupSVG
     case 'puzzle':
-      return <img src={PuzzleSVG} alt='x' />
+      return PuzzleSVG
     case 'staff-snake':
-      return <img src={StaffSnakeSVG} alt='x' />
+      return StaffSnakeSVG
     case 'flower':
-      return <img src={FlowerSVG} alt='x' />
+      return FlowerSVG
     case 'network':
-      return <img src={NetworkSVG} alt='x' />
+      return NetworkSVG
     case 'crosshair':
-      return <img src={CrosshairSVG} alt='x' />
+      return CrosshairSVG
     case 'shop':
-      return <img src={ShopSVG} alt='x' />
+      return ShopSVG
     case 'plant':
-      return <img src={PlantSVG} alt='x' />
+      return PlantSVG
     case 'circle-dot':
-      return <img src={CircleDotSVG} alt='x' />
+      return CircleDotSVG
     case 'cannabis':
-      return <img src={CannabisSVG} alt='x' />
+      return CannabisSVG
     default:
-      return <></>
+      return ''
   }
 }
 
-const MarkerIconFactory = (shape: string, color1: string, color2: string, icon: string) => {
+const MarkerIconFactory = (
+  shape: string,
+  markerColor: string,
+  borderColor: string,
+  icon: string,
+) => {
   return divIcon({
-    html: `${renderToString(createSvg(shape, color1, color2))}${renderToString(addIcon(icon))}`,
+    html: `${createSvg(shape, markerColor, borderColor)}<img class="${icon}-icon" src="${addIcon(icon)}" alt="x" />`,
     iconAnchor: [17, 40],
     popupAnchor: [0, -40],
     iconSize: new Point(40, 46),

src/assets/fist.svg

@@ -0,0 +1,8 @@
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              fill='currentColor'
+              stroke='currentColor'
+              viewBox='0 0 448 512'
+            >
+              <path d='M192 0c17.7 0 32 14.3 32 32V144H160V32c0-17.7 14.3-32 32-32zM64 64c0-17.7 14.3-32 32-32s32 14.3 32 32v80H64V64zm192 0c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V64zm96 64c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V128zm-96 88l0-.6c9.4 5.4 20.3 8.6 32 8.6c13.2 0 25.4-4 35.6-10.8c8.7 24.9 32.5 42.8 60.4 42.8c11.7 0 22.6-3.1 32-8.6V256c0 52.3-25.1 98.8-64 128v96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V401.6c-17.3-7.9-33.2-18.8-46.9-32.5L69.5 357.5C45.5 333.5 32 300.9 32 267V240c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40H128c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z' />
+            </svg>

src/assets/layer.svg

@@ -1,4 +1,4 @@
-<svg version='1.1' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+<svg version='1.1' viewBox='0 0 20 20' stroke-width="2" xmlns='http://www.w3.org/2000/svg'>
     <path
         id='svg_1'
         fill='currentColor'
@@ -6,7 +6,6 @@
     />
     <path
         id='svg_2'
-        strokeWidth='2'
         stroke='currentColor'
         fill='none'
         d='m11.247,4.30851l6.2349,3.0877c0.69083,0.34211 0.69083,0.89295 0,1.2351l-6.2349,3.0877c-0.69083,0.34211 -1.8031,0.34212 -2.494,0l-6.2349,-3.0877c-0.69083,-0.34211 -0.69083,-0.89295 0,-1.2351l6.2349,-3.0877c0.69083,-0.34211 1.8031,-0.34211 2.494,0z'

src/assets/markdown.svg

@@ -6,7 +6,7 @@
       width='16'
       data-view-component='true'
       className='octicon octicon-markdown'
-      fill='rgb(156 163 175 / var(--tw-text-opacity))'
+      fill='rgb(156 163 175)'
 >
   <path d='M14.85 3c.63 0 1.15.52 1.14 1.15v7.7c0 .63-.51 1.15-1.15 1.15H1.15C.52 13 0 12.48 0 11.84V4.15C0 3.52.52 3 1.15 3ZM9 11V5H7L5.5 7 4 5H2v6h2V8l1.5 1.92L7 8v3Zm2.99.5L14.5 8H13V5h-2v3H9.5Z'></path>
 </svg>

src/assets/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="tw-w-5 tw-h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path></svg>

src/assets/share/clipboard.svg

@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="white" stroke-width="0" viewBox="0 0 256 256" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg"><path d="M180,64H40A12,12,0,0,0,28,76V216a12,12,0,0,0,12,12H180a12,12,0,0,0,12-12V76A12,12,0,0,0,180,64ZM168,204H52V88H168ZM228,40V180a12,12,0,0,1-24,0V52H76a12,12,0,0,1,0-24H216A12,12,0,0,1,228,40Z"></path></svg>

src/assets/share/whatsapp.svg

@@ -1,6 +1,6 @@
 <svg
         stroke='currentColor'
-        fill='currentColor'
+        fill='white'
         strokeWidth='0'
         viewBox='0 0 512 512'
         xmlns='http://www.w3.org/2000/svg'

src/assets/user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150 150" class="tw-w-20 tw-h-20 tw-rounded-full" style="background-color: rgb(238, 238, 238);"><path fill="#ccc" d="M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z"></path><path fill="#ccc" d="M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z"></path></svg>

vite.config.ts

@@ -15,8 +15,8 @@ export default defineConfig({
       exclude: [...configDefaults.exclude],
       thresholds: {
         lines: 0,
-        functions: 61,
-        branches: 62,
+        functions: 60,
+        branches: 61,
         statements: 0,
       },
     },