@geops/rvf-mobility-web-component 0.1.12 → 0.1.14

package/src/RvfShareMenuButton/RvfShareMenuButton.tsx

@@ -0,0 +1,27 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
+import Share from "../icons/Share";
+import RvfIconButton from "../RvfIconButton";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfShareMenuButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function RvfShareMenuButton({ ...props }: RvfShareMenuButtonProps) {
+  const { isShareMenuOpen, setIsShareMenuOpen } = useRvfContext();
+
+  const onClick = useCallback(() => {
+    setIsShareMenuOpen(!isShareMenuOpen);
+  }, [isShareMenuOpen, setIsShareMenuOpen]);
+
+  return (
+    <RvfIconButton {...props} onClick={onClick} selected={isShareMenuOpen}>
+      <Share />
+    </RvfIconButton>
+  );
+}
+
+export default memo(RvfShareMenuButton);

package/src/RvfShareMenuButton/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RvfShareMenuButton";

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -1,78 +1,158 @@
 import type { Options } from "ol/layer/Group";
 
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
 import { Feature } from "ol";
 import { Point } from "ol/geom";
 import { Group, Vector } from "ol/layer";
+import { unByKey } from "ol/Observable";
 import { Cluster } from "ol/source";
 import VectorSource from "ol/source/Vector";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
+import Bicycle from "../icons/Bike";
+import Car from "../icons/Car";
+import CargoBike from "../icons/CargoBike";
+import Ride from "../icons/Ride";
+import Scooter from "../icons/Scooter";
 import createMobiDataBwWfsLayer from "../utils/createMobiDataBwWfsLayer";
-import createSharedMobilityLayer from "../utils/createSharedMobilityLayer";
+import createFreeFloatMobilityLayer from "../utils/createSharedMobilityLayer";
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
-function RvfSharedMobilityLayerGroup(props: Options & Record<string, unknown>) {
-  const { map } = useMapContext();
+export type GroupOptions = Options & Record<string, unknown>;
 
+function RvfSharedMobilityLayerGroup(props: GroupOptions) {
+  const { baseLayer, map } = useMapContext();
+  const { setSharedMobilityLayerGroup } = useRvfContext();
   const group = useMemo(() => {
-    const sharingStationsBicycle = createMobiDataBwWfsLayer(
-      "sharing_stations_bicycle",
-      "green",
-    );
-    sharingStationsBicycle.set("title", "Stations Bicycle");
-
-    const sharingStationsCar = createMobiDataBwWfsLayer(
-      "sharing_stations_car",
-      "green",
-    );
-    sharingStationsCar.set("title", "Stations Car");
-
-    const sharingStationsCargoBicycle = createMobiDataBwWfsLayer(
-      "sharing_stations_cargo_bicycle",
-      "green",
-    );
-    sharingStationsCargoBicycle.set("title", "Stations Cargo Bicycle");
-
-    const sharingStationsScooterStanding = createMobiDataBwWfsLayer(
-      "sharing_stations_scooters_standing",
-      "purple",
-    );
-    sharingStationsScooterStanding.set("title", "Stations Scooter");
-
-    const sharingVehicles = createSharedMobilityLayer(
-      "sharing_vehicles",
-      "green",
-    );
-    sharingVehicles.set("title", "Free Floating");
+    if (!baseLayer) {
+      return null;
+    }
+
+    const sharingBicycle = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "bike";
+          },
+          maplibreLayer: baseLayer,
+          maxZoom: 18,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_bicycle", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "bike"),
+      ],
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          Fahrrad
+          <Bicycle />
+        </div>
+      ),
+    } as GroupOptions);
+
+    const sharingCar = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "car";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_car", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "car"),
+      ],
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          Auto
+          <Car />
+        </div>
+      ),
+    } as GroupOptions);
+
+    const sharingCargoBicycle = new Group({
+      layers: [
+        new MaplibreStyleLayer({
+          isQueryable: true,
+          layersFilter: ({ metadata }) => {
+            return metadata?.["rvf.filter"] === "cargo_bike";
+          },
+          maplibreLayer: baseLayer,
+        }),
+        createMobiDataBwWfsLayer("sharing_stations_cargo_bicycle", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "cargo_bike"),
+      ],
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          Cargobike
+          <CargoBike />
+        </div>
+      ),
+    } as GroupOptions);
+
+    const sharingScooter = new Group({
+      layers: [
+        // No scooter station data available
+        // new MaplibreStyleLayer({
+        //   isQueryable: true,
+        //   layersFilter: ({ metadata }) => {
+        //     return metadata?.["rvf.filter"] === "scooter";
+        //   },
+        //   maplibreLayer: baseLayer,
+        // }),
+        createMobiDataBwWfsLayer("sharing_stations_scooters_standing", "green"),
+        createFreeFloatMobilityLayer("sharing_vehicles", "green", "scooter"),
+      ],
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          E-Roller
+          <Scooter />
+        </div>
+      ),
+    } as GroupOptions);
+
+    const sharingHitchHiking = new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "hitchhiking";
+      },
+      maplibreLayer: baseLayer,
+      title: (
+        <div className="flex items-center justify-between gap-2">
+          Mitfahrpunkte
+          <Ride />
+        </div>
+      ),
+    });
 
     return new Group({
       layers: [
-        sharingStationsBicycle,
-        sharingStationsCar,
-        sharingStationsCargoBicycle,
-        sharingStationsScooterStanding,
-        sharingVehicles,
+        sharingBicycle,
+        sharingCar,
+        sharingCargoBicycle,
+        sharingScooter,
+        sharingHitchHiking,
       ],
       ...props,
     });
-  }, [props]);
+  }, [baseLayer, props]);
 
   // Reload features every minute
   useEffect(() => {
     const interval = window.setInterval(() => {
-      group.getLayers().forEach((layer: Vector) => {
-        // @ts-expect-error - private property
-        layer.getSource().loadedExtentsRtree_.clear();
-        layer.getSource().clear(true);
-        layer.getSource().changed();
-
-        // For cluster source
-        (
+      group.getLayers().forEach((layer: Group) => {
+        layer.getLayers().forEach((layer: MaplibreStyleLayer | Vector) => {
+          const source = layer.getSource();
+          source?.refresh();
+
+          // For cluster source
           (
-            layer.getSource() as Cluster<Feature<Point>>
-          )?.getSource?.() as VectorSource<Feature<Point>>
-        )?.refresh();
+            (source as Cluster<Feature<Point>>)?.getSource?.() as VectorSource<
+              Feature<Point>
+            >
+          )?.refresh();
+        });
       });
     }, 60000);
     return () => {
@@ -80,20 +160,26 @@ function RvfSharedMobilityLayerGroup(props: Options & Record<string, unknown>) {
     };
   }, [group]);
 
+  useEffect(() => {
+    setSharedMobilityLayerGroup(group);
+  }, [group, setSharedMobilityLayerGroup]);
+
   useEffect(() => {
     if (!map || !group) {
       return;
     }
-    map.on("moveend", () => {
+
+    const key = map.on("moveend", () => {
       console.log("ZOOM", map.getView().getZoom());
     });
 
     map.addLayer(group);
 
     return () => {
+      unByKey(key);
       map.removeLayer(group);
     };
-  });
+  }, [map, group]);
 
   return null;
 }

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -110,8 +110,16 @@ function SingleClickListener() {
         setSelectedFeature(null);
         setSelectedFeatures([]);
       } else {
-        setSelectedFeatures(features);
-        setSelectedFeature(features[0]);
+        const feats = [];
+        features.forEach((feature) => {
+          if (feature.get("features")) {
+            feats.push(...feature.get("features"));
+          } else {
+            feats.push(feature);
+          }
+        });
+        setSelectedFeatures(feats);
+        setSelectedFeature(feats[0]);
       }
     },
     [

package/src/RvfTarifZonenLayer/RvfTarifZonenLayer.tsx

@@ -4,26 +4,30 @@ import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
 
 function RvfTarifZonenLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
+  const { setTarifZonenLayer } = useRvfContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
       return null;
     }
     return new MaplibreStyleLayer({
-      layersFilter: ({ metadata, source, "source-layer": sourceLayer }) => {
-        return (
-          metadata?.["rvf.filter"] === "tarifzonen" ||
-          (source === "rvf" && sourceLayer === "tarifzonen")
-        );
+      isQueryable: false,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "zones";
       },
       maplibreLayer: baseLayer,
       ...(props || {}),
     });
   }, [baseLayer, props]);
 
+  useEffect(() => {
+    setTarifZonenLayer(layer);
+  }, [layer, setTarifZonenLayer]);
+
   useEffect(() => {
     if (!map || !layer) {
       return;

package/src/RvfTopics/RvfTopics.tsx

@@ -1,4 +1,6 @@
+import { getUid } from "ol";
 import { Group } from "ol/layer";
+import BaseLayer from "ol/layer/Base";
 import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
@@ -9,36 +11,31 @@ import useMapContext from "../utils/hooks/useMapContext";
 export type RvfTopicsProps = {} & JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
+const getConfigForLayer = (layer: BaseLayer) => {
+  return {
+    childItems:
+      (layer as Group)
+        ?.getLayers?.()
+        .getArray()
+        .map((subLayer) => {
+          return getConfigForLayer(subLayer);
+        }) || [],
+    id: getUid(layer),
+    isControlChecked: layer.getVisible(),
+    layer,
+    selectionType: SelectionType.CHECKBOX,
+    title: layer.get("title"),
+  };
+};
+
 function RvfTopics(props: RvfTopicsProps) {
   const { map } = useMapContext();
+
   const layers = map
     .getLayers()
     .getArray()
-    .filter((layer) => {
-      return !layer.get("isNotInLayerTree");
-    })
     .map((layer) => {
-      return {
-        childItems:
-          (layer as Group)
-            ?.getLayers?.()
-            .getArray()
-            .map((subLayer) => {
-              return {
-                childItems: [],
-                id: (Math.random() + 1).toString(36).substring(7),
-                isControlChecked: subLayer.getVisible(),
-                layer: subLayer,
-                selectionType: SelectionType.CHECKBOX,
-                title: subLayer.get("title"),
-              };
-            }) || [],
-        id: (Math.random() + 1).toString(36).substring(7),
-        isControlChecked: layer.getVisible(),
-        layer,
-        selectionType: SelectionType.CHECKBOX,
-        title: layer.get("title"),
-      };
+      return getConfigForLayer(layer);
     });
 
   return <RvfLayerTree layers={layers} {...props} />;

package/src/icons/Automat/Automat.tsx

@@ -0,0 +1,8 @@
+// @ts-expect-error - svg loaded as dataurl
+import src from "./rvf_automat.svg";
+
+function Automat({ ...props }) {
+  return <img alt="Automat" src={src} title="Automat" {...props} />;
+}
+
+export default Automat;

package/src/icons/Automat/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Automat";

package/src/icons/Automat/rvf_automat.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" width="25.64767838" height="25.64767456" viewBox="0 0 25.64767838 25.64767456">
+  <g id="rvf_base">
+    <g id="rvf_automat">
+      <g>
+        <path d="M12.82391739,25.14781189C6.02850723,25.14781189.50018692,19.6190033.50018692,12.82359314S6.02850723.49986267,12.82391739.49986267s12.32373047,5.52832031,12.32373047,12.32373047-5.52832031,12.32421875-12.32373047,12.32421875Z" style="fill: #f3c200;"/>
+        <path d="M12.82384109,1c6.53012085,0,11.82383728,5.29370117,11.82383728,11.82383728,0,6.53012085-5.29371643,11.82383728-11.82383728,11.82383728-6.53012848,0-11.82384109-5.29371643-11.82384109-11.82383728C1,6.29370117,6.29371262,1,12.82384109,1M12.82384109,0C5.7527504,0,0,5.75274658,0,12.82383728s5.7527504,12.82383728,12.82384109,12.82383728,12.82383728-5.75274658,12.82383728-12.82383728S19.89493179,0,12.82384109,0h0Z" style="fill: #f7f4f4;"/>
+      </g>
+      <g>
+        <path d="M13.78932179,15.52073714h2.22363281c.41259766,0,.74804688-.33544922.74804688-.74804688s-.33544922-.74804688-.74804688-.74804688h-2.22363281c-.41259766,0-.74804688.33544922-.74804688.74804688s.33544922.74804688.74804688.74804688Z" style="fill: #fff; fill-rule: evenodd;"/>
+        <path d="M17.35963429,4.94749496h-9.07177734c-1.12695312,0-2.04394531.91699219-2.04394531,2.04443359v11.6640625c0,1.12695312.91699219,2.04394531,2.04394531,2.04394531h9.07177734c1.12744141,0,2.04443359-.91699219,2.04443359-2.07568359V6.99192855c0-1.12744141-.91699219-2.04443359-2.04443359-2.04443359ZM7.74000539,18.07640121h10.16796875v.57958984c0,.30224609-.24609375.54785156-.54833984.54785156h-9.07177734c-.30224609,0-.54785156-.24560547-.54785156-.57958984v-.54785156ZM17.35963429,6.44407699c.30224609,0,.54833984.24560547.54833984.54785156v1.77832031H7.74000539v-1.77832031c0-.30224609.24560547-.54785156.54785156-.54785156h9.07177734ZM17.90797414,10.26634261v6.31347656H7.74000539v-6.31347656h10.16796875Z" style="fill: #fff; fill-rule: evenodd;"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/icons/Bike/Bike.tsx

@@ -0,0 +1,8 @@
+// @ts-expect-error - svg loaded as dataurl
+import bike from "./rvf_shared_bike.svg";
+
+function Bike({ ...props }) {
+  return <img alt="Bicycle" src={bike} {...props} />;
+}
+
+export default Bike;

package/src/icons/Bike/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Bike";

package/src/icons/Bike/rvf_shared_bike.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" width="25.64767456" height="25.64768219" viewBox="0 0 25.64767456 25.64768219">
+  <g id="rvf_base">
+    <g id="rvf_shared_bike">
+      <g>
+        <path d="M12.82368469,25.14785767C6.02827454,25.14785767.49995422,19.61904907.49995422,12.82363892S6.02827454.49990845,12.82368469.49990845s12.32421875,5.52832031,12.32421875,12.32373047-5.52880859,12.32421875-12.32421875,12.32421875Z" style="fill: #00973b;"/>
+        <path d="M12.82383728,1c6.53012848,0,11.82383728,5.29371262,11.82383728,11.82384109,0,6.53011703-5.2937088,11.82384109-11.82383728,11.82384109-6.53012085,0-11.82383728-5.29372406-11.82383728-11.82384109C1,6.29371262,6.29371643,1,12.82383728,1M12.82383728,0C5.75274658,0,0,5.7527504,0,12.82384109c0,7.07108688,5.75274658,12.82384109,12.82383728,12.82384109s12.82383728-5.75275421,12.82383728-12.82384109C25.64767456,5.7527504,19.89492798,0,12.82383728,0h0Z" style="fill: #f7f4f4;"/>
+      </g>
+      <g id="verkehrstraeger_verkehrstraeger-rad-2px" data-name="verkehrstraeger/verkehrstraeger-rad-2px">
+        <path id="Fill-1" d="M8.86352249,11.52875744h1.58400038c.43718404,0,.792-.35481596.792-.792s-.35481596-.79200019-.792-.79200019h-1.58400038c-.01504804,0-.02771988.00792018-.04197598.00871212-.41659202.02296803-.75002402.36115207-.75002402.78328806,0,.43718404.35481596.792.792.792" style="fill: #fff; fill-rule: evenodd;"/>
+        <path d="M18.36764488,18.99228122c-.53417969,0-1.06298828-.13037109-1.57275391-.38818359-.41992188-.21289062-.78759766-.50439453-1.09277344-.86621094-.54833984-.64892578-.83837891-1.42675781-.83837891-2.24951172,0-.98876953.40966797-1.90576172,1.15429688-2.58251953l-.61669922-1.16113281-4.18896484,2.34960938-.56396484.32519531c.08349609.43896484.13525391.75634766.13525391,1.06884766,0,1.93212891-1.57177734,3.50390625-3.50390625,3.50390625-.1328125,0-.26025391-.01806641-.38720703-.03613281-1.80908203-.24169922-3.11669922-1.72802734-3.11669922-3.46777344,0-.46289062.09033203-.91552734.26855469-1.34423828.54638672-1.31201172,1.81640625-2.15966797,3.23535156-2.15966797.53369141,0,1.06347656.13085938,1.57324219.38964844.38525391.19580078.72265625.45117188,1.00292969.75830078l.62402344-.30664062,4.10742188-2.37109375-.91503906-1.70458984c-.04492188-.07910156-.06494141-.16699219-.07763672-.23486328l-.01757812-.10742188c-.04443359-.36376953.18408203-.70703125.53125-.79931641l1.52441406-.40869141c.06738281-.01855469.13134766-.02734375.19482422-.02734375.33007812,0,.62109375.22314453.70654297.54296875.06640625.24755859-.00830078.50927734-.19970703.69970703-.10449219.10449219-.20556641.16699219-.31787109.19677734l-.55908203.14990234.72558594,1.40722656,1.125,1.94824219c.43652344-.08203125.75146484-.1328125,1.05957031-.1328125,1.93701172.0078125,3.50390625,1.57861328,3.50390625,3.50390625,0,.03613281-.00488281.07080078-.01025391.10498047-.11425781,1.94628906-1.64404297,3.39892578-3.49365234,3.39892578ZM16.75485191,14.25253513c-.27929688.36279297-.42724609.79003906-.42724609,1.23583984,0,.57714844.25244141,1.13183594.69238281,1.52197266.37744141.33398438.85595703.51806641,1.34765625.51806641.22851562,0,.46484375-.04394531.70166016-.13134766l.578125-.33300781c.48632812-.39746094.76025391-.97021484.76025391-1.57568359,0-.66162109-.32617188-1.28564453-.87255859-1.66992188-.34716797-.2421875-.75097656-.37011719-1.16748047-.37011719-.04101562,0-.08056641.00537109-.12060547.01074219l-.08837891.01220703-.02001953.08496094.85205078,1.4765625c.14013672.2421875.12646484.54003906-.03515625.77685547-.06787109.09960938-.14404297.17236328-.23242188.22265625-.08984375.05273438-.19140625.08203125-.31005859.08984375h-.0078125c-.31933594,0-.55322266-.13378906-.68261719-.35742188l-.91308594-1.58300781-.0546875.07080078ZM7.27975425,13.44833591c-1.125,0-2.04003906.91503906-2.04003906,2.04003906s.91503906,2.04003906,2.04003906,2.04003906,2.04003906-.91503906,2.04003906-2.04003906c0-.04345703-.00585938-.0859375-.01171875-.12841797l-.01171875-.08837891-.08544922-.02197266-1.67089844.96533203c-.11181641.06396484-.23828125.09814453-.36572266.09814453-.26123047,0-.50390625-.14013672-.63476562-.36621094-.20166016-.34912109-.08154297-.79833984.26855469-1.00097656l1.69287109-.97705078c-.35498047-.375-.77929688-.52050781-1.22119141-.52050781Z" style="fill: #fff; fill-rule: evenodd;"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/icons/Car/Car.tsx

@@ -0,0 +1,8 @@
+// @ts-expect-error - svg loaded as dataurl
+import car from "./rvf_shared_car.svg";
+
+function Car({ ...props }) {
+  return <img alt="Car" src={car} {...props} />;
+}
+
+export default Car;

package/src/icons/Car/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Car";

package/src/icons/Car/rvf_shared_car.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" width="25.64767838" height="25.64768982" viewBox="0 0 25.64767838 25.64768982">
+  <g id="rvf_base">
+    <g id="rvf_shared_car">
+      <g>
+        <path d="M12.82391739,25.14767456C6.02850723,25.14767456.50018692,19.61935425.50018692,12.82394409S6.02850723.50021362,12.82391739.50021362s12.32373047,5.52832031,12.32373047,12.32373047-5.52832031,12.32373047-12.32373047,12.32373047Z" style="fill: #00973b;"/>
+        <path d="M12.82384109,1c6.53012085,0,11.82383728,5.29371643,11.82383728,11.82383728,0,6.53013611-5.29371643,11.82385254-11.82383728,11.82385254-6.53012848,0-11.82384109-5.29371643-11.82384109-11.82385254C1,6.29371643,6.29371262,1,12.82384109,1M12.82384109,0C5.7527504,0,0,5.75274658,0,12.82383728s5.7527504,12.82385254,12.82384109,12.82385254,12.82383728-5.75276184,12.82383728-12.82385254S19.89493179,0,12.82384109,0h0Z" style="fill: #f7f4f4;"/>
+      </g>
+      <g id="verkehrstraeger_verkehrstraeger-auto-2px" data-name="verkehrstraeger/verkehrstraeger-auto-2px">
+        <path id="Fill-1" d="M17.14383851,14.36036615c.39744003,0,.72.32255997.72.72s-.32255997.72-.72.72-.72-.32255997-.72-.72.32255997-.72.72-.72" style="fill: #fff; fill-rule: evenodd;"/>
+        <path id="Fill-7" d="M8.50383851,14.36036615c-.39744003,0-.72.32255997-.72.72s.32255997.72.72.72.72-.32255997.72-.72-.32255997-.72-.72-.72" style="fill: #fff; fill-rule: evenodd;"/>
+        <path id="Fill-11" d="M18.58383851,13.64036615v3.6c0,.39744003-.32255997.72-.72.72h-1.41047974v-.72287979c0-.39240005-.31536049-.70920044-.70560036-.71712021h-.04391991v-.00287979h-5.7254401c-.39744003,0-.72.32255997-.72.72v.72287979h-1.4745599c-.39744003,0-.72-.32255997-.72-.72v-3.6l.31319996-.72.30024004-.68831989.82656.41327991.24624001.12312.12168011.05399986c.16631996.06480011.34343983.09792011.52199993.09792011h6.86015991l.13391991-.00647987c.17711952-.01656017.34992073-.06552006.50976082-.1454401l.24623932-.12312.84168045-.42048008.29375931.69552006.30456024.72ZM8.50383851,10.33268625l.56591984-1.29960005c.11448029-.26280001.37368004-.43272005.66024021-.43272005h6.24600014c.28943962,0,.55007996.17280001.66311966.43992004l.50472015,1.19375999.27936035.66168011-.27936035.13967983-.88992004.44496002h-6.86015991l-.88992004-.44496002-.25127998-.12527985.25127998-.57744003ZM20.02383851,10.76036615h-1.09440033l-.30383926-.72-.66023987-1.56095999c-.3376799-.79992-1.12176041-1.31904001-1.98936035-1.31904001h-6.24600014c-.85968018,0-1.63728012.50976-1.98,1.29744003l-.68904001,1.58255997-.31392008.72h-1.12319996c-.39743999,0-.72.32255997-.72.72s.32256001.72.72.72h.49608001l-.31320004.72-.06335996.14543976c-.07847998.18072029-.11952001.37656052-.11952001.57456024v3.6c0,1.1930397.96695995,2.16,2.16,2.16h1.4745599l.10728012-.0035994c.74519989-.05544113,1.33272022-.67751999,1.33199993-1.44000069h4.31496002c.00072029.79919975.64511993,1.44360008,1.44072029,1.44360008h1.41047974c1.1930397,0,2.16-.9669603,2.16-2.16v-3.6c0-.19295975-.03888062-.3830397-.11376068-.5608802l-.06695892-.1591198-.30456024-.72h.48527985c.39744003,0,.72-.32255997.72-.72s-.32255997-.72-.72-.72h0Z" style="fill: #fff; fill-rule: evenodd;"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/icons/CargoBike/CargoBike.tsx

@@ -0,0 +1,8 @@
+// @ts-expect-error - svg loaded as dataurl
+import cargoBike from "./rvf_shared_cargo_bike.svg";
+
+function CargoBike({ ...props }) {
+  return <img alt="Cargo bike" src={cargoBike} {...props} />;
+}
+
+export default CargoBike;

package/src/icons/CargoBike/index.tsx

@@ -0,0 +1 @@
+export { default } from "./CargoBike";

package/src/icons/CargoBike/rvf_shared_cargo_bike.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" width="28.01245499" height="28.01245499" viewBox="0 0 28.01245499 28.01245499">
+  <g id="rvf_base">
+    <g id="rvf_shared_cargo_bike">
+      <g>
+        <path d="M14.0060463,27.51237106C6.55878067,27.51237106.50018692,21.45328903.50018692,14.00602341S6.55878067.50016403,14.0060463.50016403s13.50634766,6.05859375,13.50634766,13.50585938-6.05908203,13.50634766-13.50634766,13.50634766Z" style="fill: #00973b;"/>
+        <path d="M14.00622177,1c7.18314362,0,13.00623322,5.82308197,13.00623322,13.00622177,0,7.18314362-5.8230896,13.00623322-13.00623322,13.00623322-7.1831398,0-13.00622177-5.8230896-13.00622177-13.00623322C1,6.82308197,6.82308197,1,14.00622177,1M14.00622177,0C6.28316116,0,0,6.28316116,0,14.00622177s6.28316116,14.00623322,14.00622177,14.00623322,14.00623322-6.28317261,14.00623322-14.00623322S21.72928238,0,14.00622177,0h0Z" style="fill: #f7f4f4;"/>
+      </g>
+      <g id="Group-9">
+        <path id="Fill-1" d="M6.06579909,13.74402308h1.584c.39283185,0,.70487989-.29145602.76665595-.66686401.00712786-.04197598.02534405-.08078381.02534405-.12513599,0-.25423208-.1275122-.46965595-.31363193-.61459183-.12592831-.09820806-.27640798-.16394401-.44748005-.17107206-.01029601-.00079194-.01980008-.00633592-.03088803-.00633592h-1.584c-.43718413,0-.79200009.35481577-.79200009.79199981,0,.0506881.01979998.09424797.02851201.14256024.06969595.36669586.37699196.64943976.76348808.64943976" style="fill: #fff; fill-rule: evenodd;"/>
+        <path d="M19.52975367,21.20815252c-.71337891,0-1.38720703-.27636719-1.89746094-.77832031-.2890625-.28369141-.50830078-.63378906-.65136719-1.04003906-.10986328-.31298828-.16308594-.60546875-.16308594-.89355469,0-.27490234.05029297-.55712891.15332031-.86328125.33007812-.9765625,1.16845703-1.67089844,2.18847656-1.81152344.15820312-.02246094.26171875-.03710938.37011719-.03710938.59814453,0,1.171875.20068359,1.65869141.58105469.66943359.52099609,1.05322266,1.29785156,1.05322266,2.13085938,0,.22412109-.03515625.45605469-.11132812.72900391-.32763672,1.16748047-1.39697266,1.98291016-2.60058594,1.98291016ZM19.52975367,17.24819159c-.68798828,0-1.24804688.56005859-1.24804688,1.24804688s.56005859,1.24804688,1.24804688,1.24804688,1.24804688-.56005859,1.24804688-1.24804688-.56005859-1.24804688-1.24804688-1.24804688Z" style="fill: #fff; fill-rule: evenodd;"/>
+        <path d="M7.76803492,21.27748846c-.23779297,0-.48535156-.02685547-.73583984-.08056641-1.60400391-.34326172-2.76806641-1.78320312-2.76806641-3.42382812,0-.98925781.41113281-1.90771484,1.15820312-2.58642578.2734375-.24853516.57519531-.44921875.89746094-.59619141.40771484-.18603516.84912109-.2890625,1.31201172-.30664062l.13623047-.01464844c.49121094,0,.97607422.10693359,1.44091797.31738281.69189453.31298828,1.27392578.86376953,1.64013672,1.55126953l.62939453-.12011719-.76318359-3.08154297-.5-1.86474609-.20507812-.00683594-.64453125.17285156c-.06201172.01660156-.12597656.02539062-.18994141.02539062-.33056641,0-.62109375-.22314453-.70654297-.54296875-.10449219-.38964844.12744141-.79199219.51757812-.89648438l1.52978516-.41015625c.06152344-.01660156.125-.02490234.18896484-.02490234.03515625,0,.06933594.00244141.10351562.00732422.23632812.02978516.44384766.18457031.55517578.41455078l.06103516.12060547.17626953.66064453,1.16015625.04443359h8.74804688l.12060547.02587891c.35449219.06103516.61132812.35791016.61132812.70605469l-.02490234.12841797c.00537109.07128906.0078125.15527344-.01416016.23974609l-.72802734,2.71533203c-.04638672.17236328-.15917969.32275391-.31738281.42382812-.14257812.08251953-.20068359.11767578-.26855469.13623047l-7.50097656,2.01025391.29248047,1.32470703c.10449219.38964844-.12744141.79150391-.51757812.89599609-.0625.01708984-.12646484.02539062-.19042969.02539062-.33007812,0-.62060547-.22314453-.70605469-.54296875l-.33496094-1.25048828-.62841797.10546875-.05126953.01367188.01416016.11425781c.00634766,1.35693359-.71337891,2.53955078-1.87158203,3.15185547-.52539062.27734375-1.07226562.41796875-1.62597656.41796875ZM7.76803492,15.73305487c-.85644531,0-1.62548828.54589844-1.91455078,1.35888672-.08300781.23144531-.12548828.46044922-.12548828.68115234,0,.58984375.26318359,1.15283203.72167969,1.54492188.37939453.32421875.83496094.49560547,1.31835938.49560547.45654297,0,.89355469-.15527344,1.26318359-.44970703.40527344-.32226562.67041016-.77978516.74707031-1.28857422l.01318359-.09033203-1.59960938.42871094c-.06201172.01660156-.12597656.02539062-.18994141.02539062-.33056641,0-.62109375-.22363281-.70654297-.54345703-.05078125-.18847656-.02490234-.38574219.07324219-.55517578.09765625-.16943359.25537109-.29052734.44433594-.34082031l1.59667969-.42773438-.05810547-.07177734c-.32421875-.40039062-.78027344-.66210938-1.28466797-.73730469-.11230469-.01660156-.20361328-.02978516-.29882812-.02978516ZM12.93453883,15.56508612l3.21630859-.79931641,3.97900391-1.06640625.22705078-.73193359.21240234-.79199219-1.89941406-.07568359h-6.66357422l.92822266,3.46533203Z" style="fill: #fff; fill-rule: evenodd;"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/icons/Copy/Copy.tsx

@@ -0,0 +1,25 @@
+import { JSX } from "preact";
+
+function Copy({ ...props }: JSX.SVGAttributes<SVGSVGElement>) {
+  return (
+    <svg
+      className="size-6"
+      fill="none"
+      height={24}
+      stroke="currentColor"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default Copy;

package/src/icons/Copy/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Copy";

package/src/icons/Doc/Doc.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from "preact/compat";
+
+function Doc(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="currentColor"
+      height="24px"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M13,1 C13.0425909,1 13.0845598,1.00266262 13.1257495,1.00783047 L13,1 C13.0528361,1 13.1052411,1.00418141 13.1567725,1.01236099 C13.1883933,1.0172036 13.2193064,1.02361582 13.249662,1.03141743 C13.2598053,1.0342797 13.2698902,1.03704988 13.2799252,1.0399762 C13.3109399,1.04873224 13.3413507,1.05922617 13.3710585,1.07110396 C13.3800191,1.07496957 13.3890567,1.0787342 13.3980377,1.08263089 C13.4262995,1.09463815 13.4536613,1.10806791 13.4802859,1.12267436 C13.4906553,1.12855823 13.5012587,1.13461331 13.5117542,1.14086468 C13.5399066,1.15749759 13.5670269,1.17554946 13.5931738,1.19484452 C13.5995817,1.19963491 13.6064603,1.20483437 13.6132762,1.21012666 C13.6177282,1.21353888 13.6216003,1.21659988 13.625449,1.21968877 L13.7071068,1.29289322 L20.7071068,8.29289322 C20.7364445,8.32223095 20.7639678,8.3533831 20.7894939,8.38616693 L20.7071068,8.29289322 C20.7429509,8.32873733 20.7757929,8.36702236 20.8054709,8.40735764 C20.8244505,8.43297305 20.8425024,8.46009338 20.8592238,8.48809993 C20.8653867,8.49874131 20.8714418,8.50934473 20.8772982,8.52005033 C20.8919321,8.54633874 20.9053618,8.57370048 20.9175449,8.60172936 C20.9212658,8.61094326 20.9250304,8.61998091 20.9286618,8.62907226 C20.9407738,8.65864932 20.9512678,8.68906007 20.9602981,8.72009403 C20.9629501,8.73010978 20.9657203,8.7401947 20.9683328,8.75032594 C20.9763842,8.78069364 20.9827964,8.81160666 20.9877474,8.84300527 C20.9892866,8.85360724 20.990772,8.86402246 20.9920936,8.8744695 C20.9973374,8.91544017 21,8.95740914 21,9 L21,20 C21,21.6568542 19.6568542,23 18,23 L6,23 C4.34314575,23 3,21.6568542 3,20 L3,4 C3,2.34314575 4.34314575,1 6,1 Z M12,3 L6,3 C5.44771525,3 5,3.44771525 5,4 L5,20 C5,20.5522847 5.44771525,21 6,21 L18,21 C18.5522847,21 19,20.5522847 19,20 L19,10 L13,10 C12.4871642,10 12.0644928,9.61395981 12.0067277,9.11662113 L12,9 L12,3 Z M17.586,8 L14,4.415 L14,8 L17.586,8 Z"></path>
+    </svg>
+  );
+}
+
+export default Doc;

package/src/icons/Doc/doc.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconfont/doc</title>
+    <g id="iconfont/doc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M13,1 C13.0425909,1 13.0845598,1.00266262 13.1257495,1.00783047 L13,1 C13.0528361,1 13.1052411,1.00418141 13.1567725,1.01236099 C13.1883933,1.0172036 13.2193064,1.02361582 13.249662,1.03141743 C13.2598053,1.0342797 13.2698902,1.03704988 13.2799252,1.0399762 C13.3109399,1.04873224 13.3413507,1.05922617 13.3710585,1.07110396 C13.3800191,1.07496957 13.3890567,1.0787342 13.3980377,1.08263089 C13.4262995,1.09463815 13.4536613,1.10806791 13.4802859,1.12267436 C13.4906553,1.12855823 13.5012587,1.13461331 13.5117542,1.14086468 C13.5399066,1.15749759 13.5670269,1.17554946 13.5931738,1.19484452 C13.5995817,1.19963491 13.6064603,1.20483437 13.6132762,1.21012666 C13.6177282,1.21353888 13.6216003,1.21659988 13.625449,1.21968877 L13.7071068,1.29289322 L20.7071068,8.29289322 C20.7364445,8.32223095 20.7639678,8.3533831 20.7894939,8.38616693 L20.7071068,8.29289322 C20.7429509,8.32873733 20.7757929,8.36702236 20.8054709,8.40735764 C20.8244505,8.43297305 20.8425024,8.46009338 20.8592238,8.48809993 C20.8653867,8.49874131 20.8714418,8.50934473 20.8772982,8.52005033 C20.8919321,8.54633874 20.9053618,8.57370048 20.9175449,8.60172936 C20.9212658,8.61094326 20.9250304,8.61998091 20.9286618,8.62907226 C20.9407738,8.65864932 20.9512678,8.68906007 20.9602981,8.72009403 C20.9629501,8.73010978 20.9657203,8.7401947 20.9683328,8.75032594 C20.9763842,8.78069364 20.9827964,8.81160666 20.9877474,8.84300527 C20.9892866,8.85360724 20.990772,8.86402246 20.9920936,8.8744695 C20.9973374,8.91544017 21,8.95740914 21,9 L21,20 C21,21.6568542 19.6568542,23 18,23 L6,23 C4.34314575,23 3,21.6568542 3,20 L3,4 C3,2.34314575 4.34314575,1 6,1 Z M12,3 L6,3 C5.44771525,3 5,3.44771525 5,4 L5,20 C5,20.5522847 5.44771525,21 6,21 L18,21 C18.5522847,21 19,20.5522847 19,20 L19,10 L13,10 C12.4871642,10 12.0644928,9.61395981 12.0067277,9.11662113 L12,9 L12,3 Z M17.586,8 L14,4.415 L14,8 L17.586,8 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/icons/Doc/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Doc";

package/src/icons/Ebike/Ebike.tsx

@@ -0,0 +1,8 @@
+// @ts-expect-error - svg loaded as dataurl
+import eBike from "./rvf_shared_e-bike.svg";
+
+function Ebike({ ...props }) {
+  return <img alt="eBike" src={eBike} {...props} />;
+}
+
+export default Ebike;

package/src/icons/Ebike/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Ebike";

package/src/icons/Ebike/rvf_shared_e-bike.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" width="25.64767456" height="25.64767456" viewBox="0 0 25.64767456 25.64767456">
+  <g id="rvf_base">
+    <g id="rvf_shared_e-bike">
+      <g>
+        <path d="M12.82368469,25.14752197C6.02827454,25.14752197.49995422,19.61920166.49995422,12.8237915S6.02827454.50006104,12.82368469.50006104s12.32421875,5.52832031,12.32421875,12.32373047-5.52880859,12.32373047-12.32421875,12.32373047Z" style="fill: #00973b;"/>
+        <path d="M12.82383728,1c6.53012848,0,11.82383728,5.29371643,11.82383728,11.82384491,0,6.53012085-5.2937088,11.82382965-11.82383728,11.82382965-6.53012085,0-11.82383728-5.2937088-11.82383728-11.82382965C1,6.29371643,6.29371643,1,12.82383728,1M12.82383728,0C5.75274658,0,0,5.75275421,0,12.82384491c0,7.07108307,5.75274658,12.82382965,12.82383728,12.82382965s12.82383728-5.75274658,12.82383728-12.82382965C25.64767456,5.75275421,19.89492798,0,12.82383728,0h0Z" style="fill: #f7f4f4;"/>
+      </g>
+      <g id="verkehrstraeger_verkehrstraeger-ebike-2px" data-name="verkehrstraeger/verkehrstraeger-ebike-2px">
+        <path d="M18.38137425,19.60538227c-.53320312,0-1.06201172-.13037109-1.57275391-.38818359-.41992188-.21289062-.78759766-.50439453-1.09326172-.86621094-.54833984-.64892578-.83789062-1.42675781-.83789062-2.24951172,0-.98876953.40966797-1.90625,1.15429688-2.58300781l-.61669922-1.16064453-4.18896484,2.34912109-.56396484.32568359c.08349609.43896484.13525391.75634766.13525391,1.06884766,0,1.93212891-1.57177734,3.50390625-3.50390625,3.50390625-.12988281,0-.25439453-.01757812-.37890625-.03466797-1.81738281-.24316406-3.125-1.72949219-3.125-3.46923828,0-.46289062.09033203-.91552734.26855469-1.34423828.54638672-1.31201172,1.81591797-2.15966797,3.23535156-2.15966797.53466797,0,1.06445312.13085938,1.57324219.38964844.38525391.19580078.72265625.45068359,1.00292969.7578125l.62402344-.30615234,4.10742188-2.37109375-.91503906-1.70458984c-.04492188-.07910156-.06494141-.16699219-.07763672-.23486328l-.01757812-.10742188c-.04394531-.36376953.18408203-.70751953.53125-.79980469l1.52441406-.40869141c.06738281-.01806641.13134766-.02685547.1953125-.02685547.33007812,0,.62060547.22314453.70605469.54296875.06591797.24755859-.00878906.50927734-.19970703.69970703-.10351562.10400391-.20458984.16650391-.31787109.19677734l-.55908203.14941406.72558594,1.40722656,1.12451172,1.94873047c.43554688-.08203125.75048828-.1328125,1.06005859-.1328125,1.93701172.0078125,3.50390625,1.57910156,3.50390625,3.50390625,0,.03613281-.00488281.0703125-.00976562.10498047-.11523438,1.94580078-1.64501953,3.39892578-3.49414062,3.39892578ZM16.76858128,14.86563618c-.27929688.36279297-.42724609.79003906-.42724609,1.23583984,0,.57714844.25244141,1.13183594.69238281,1.52197266.37744141.33398438.85595703.51806641,1.34765625.51806641.22900391,0,.46533203-.04443359.70214844-.13183594l.57763672-.33300781c.48632812-.39746094.76025391-.96972656.76025391-1.57519531,0-.66162109-.32617188-1.28564453-.87255859-1.66992188-.34667969-.2421875-.75-.37011719-1.16748047-.37011719-.04296875,0-.08349609.00537109-.12451172.01123047l-.08837891.01220703-.01611328.08447266.85205078,1.47607422c.14013672.24267578.12695312.54003906-.03466797.77685547-.06835938.09960938-.14453125.17285156-.23291016.22314453-.09033203.05224609-.19140625.08154297-.31005859.08935547h-.00830078c-.31933594,0-.55273438-.13378906-.68212891-.35742188l-.91308594-1.58251953-.0546875.07080078ZM7.29348363,14.06143696c-1.125,0-2.04003906.91503906-2.04003906,2.04003906s.91503906,2.04003906,2.04003906,2.04003906,2.04003906-.91503906,2.04003906-2.04003906c0-.04248047-.00537109-.08349609-.01123047-.12451172l-.01220703-.08886719-.08544922-.02539062-1.67089844.96533203c-.11181641.06396484-.23779297.09814453-.36572266.09814453-.26074219,0-.50390625-.140625-.63476562-.36621094-.20166016-.34960938-.08154297-.79882812.26806641-1.00097656l1.69335938-.97753906c-.35546875-.37451172-.77978516-.52001953-1.22119141-.52001953Z" style="fill: #fff; fill-rule: evenodd;"/>
+        <path id="Fill-4" d="M7.58151838,9.30565168c.065736.03801589.13384798.06494382.20354398.08236807.01188004.00316777.02376002.00633592.036432.00871175.01029601.00158426.02059202.00396009.03009604.0063363.044352.00712786.08949598.01108795.135432.01108795h1.00663193l-.71200794,1.23314375c-.21859202.37936807-.08870399.86328012.28987195,1.08187214.37857613.21938434.86328012.08949593,1.08187195-.28987214l1.39708795-2.41876792c.10137621-.1758241.1275122-.3738241.08870399-.55835994-.00237583-.01108795-.00475203-.02217609-.00712786-.03326404-.00316815-.01267203-.00712786-.02534386-.01108795-.03801589-.00475203-.01583998-.01029601-.03168016-.01583998-.04672801-.00633592-.01583998-.01267221-.03167997-.01900813-.04672801-.00475203-.00950407-.00871175-.018216-.01346378-.02772007-.00871212-.01742406-.01821619-.03405599-.02772026-.05068791-.00554398-.00950407-.01187989-.01900813-.01742387-.02851201-.00871212-.01346397-.01821619-.02692813-.02771988-.03959996-.00871212-.01108814-.01742425-.02217609-.02613599-.0324721-.00712824-.00871194-.0142561-.01742406-.02138396-.02613599-.01267221-.01346397-.02613599-.02692794-.03960015-.03959996-.00554398-.00554398-.01108795-.01029601-.01583998-.01583998-.14097598-.12830395-.32788803-.20671212-.53380821-.20671212h-1.01534386l.71280008-1.23393588c.21859202-.37857604.08870399-.86328005-.28987214-1.08187204-.37936788-.21859199-.86327993-.088704-1.08187195.289872l-1.39708796,2.4195601c-.21859199.37857594-.088704.86327993.28987201,1.08187195" style="fill: #fff; fill-rule: evenodd;"/>
+      </g>
+    </g>
+  </g>
+</svg>