fetching data from api for route preview

src/preview/components/WeatherWidget/icons/DetHumidity.tsx

@@ -0,0 +1,16 @@
+export const DetHumidity = () => {
+  return (
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M32 63.68C19.42 63.68 9.19 53.45 9.19 40.87C9.19 28.25 22.63 9.87001 28.41 2.56001C29.28 1.45001 30.59 0.820007 32 0.820007C33.41 0.820007 34.72 1.45001 35.59 2.56001C41.37 9.88001 54.81 28.26 54.81 40.87C54.81 53.44 44.58 63.68 32 63.68ZM32 4.81001C31.9 4.81001 31.7 4.84001 31.55 5.03001C27.24 10.48 13.19 29.18 13.19 40.86C13.19 51.23 21.63 59.67 32 59.67C42.37 59.67 50.81 51.23 50.81 40.86C50.81 29.18 36.76 10.48 32.46 5.03001C32.3 4.84001 32.1 4.81001 32 4.81001Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

src/preview/components/WeatherWidget/icons/DetWind.tsx

@@ -0,0 +1,24 @@
+export const DetWind = () => {
+  return (
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22.03 23.32H4.59998C3.49998 23.32 2.59998 22.42 2.59998 21.32C2.59998 20.22 3.49998 19.32 4.59998 19.32H22.02C26 19.32 29.24 16.08 29.24 12.1C29.24 8.12001 26 4.88 22.02 4.88C18.04 4.88 14.8 8.12001 14.8 12.1C14.8 13.2 13.9 14.1 12.8 14.1C11.7 14.1 10.8 13.2 10.8 12.1C10.8 5.91001 15.84 0.880005 22.02 0.880005C28.2 0.880005 33.24 5.92001 33.24 12.1C33.24 18.28 28.21 23.32 22.03 23.32Z"
+        fill="white"
+      />
+      <path
+        d="M50.17 34.3H14.15C13.05 34.3 12.15 33.4 12.15 32.3C12.15 31.2 13.05 30.3 14.15 30.3H50.17C54.15 30.3 57.39 27.06 57.39 23.08C57.39 19.1 54.15 15.86 50.17 15.86C46.19 15.86 42.95 19.1 42.95 23.08C42.95 24.18 42.05 25.08 40.95 25.08C39.85 25.08 38.95 24.18 38.95 23.08C38.95 16.89 43.99 11.86 50.17 11.86C56.36 11.86 61.39 16.9 61.39 23.08C61.39 29.26 56.36 34.3 50.17 34.3Z"
+        fill="white"
+      />
+      <path
+        d="M40.63 63.13C34.44 63.13 29.41 58.09 29.41 51.91C29.41 50.81 30.31 49.91 31.41 49.91C32.51 49.91 33.41 50.81 33.41 51.91C33.41 55.89 36.65 59.13 40.63 59.13C44.61 59.13 47.85 55.89 47.85 51.91C47.85 47.93 44.61 44.69 40.63 44.69H4.59998C3.49998 44.69 2.59998 43.79 2.59998 42.69C2.59998 41.59 3.49998 40.69 4.59998 40.69H40.62C46.81 40.69 51.84 45.73 51.84 51.91C51.84 58.09 46.82 63.13 40.63 63.13Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

src/preview/components/WeatherWidget/weather-widget-icon.tsx

@@ -40,9 +40,5 @@ export function WeatherWidgetIcon({ icon, size = 16 }: WeatherWidgetIconProps) {
       />
     );
 
-  return createElement(svg, {
-    width: size,
-    height: size,
-    style: { margin: "0 auto", display: "block" },
-  });
+  return createElement(svg);
 }

src/preview/components/WeatherWidget/weather-widget-right.tsx

@@ -59,7 +59,7 @@ export function WeatherWidgetRight({
           marginBottom: 8,
         }}
       >
-        <IconHumidity width={16} height={16} style={{ marginRight: 8 }} />
+        <IconHumidity />
         <b children={weatherInfo?.humidity ?? "--"} />%
       </div>
       <div
@@ -68,7 +68,7 @@ export function WeatherWidgetRight({
           alignItems: "center",
         }}
       >
-        <IconWind width={16} height={16} style={{ marginRight: 8 }} />
+        <IconWind />
         <b children={weatherInfo?.windSpeed ?? "--"} />
         &nbsp;м/с
       </div>