diff --git a/gallery/easel/route/view/weather/templates/weather.html b/gallery/easel/route/view/weather/templates/weather.html
index b8d7a02..0b1c43c 100644
--- a/gallery/easel/route/view/weather/templates/weather.html
+++ b/gallery/easel/route/view/weather/templates/weather.html
@@ -66,7 +66,8 @@
data-bs-toggle="tooltip"
data-bs-title="{{ value.sky }}">
{% for icon in value.sky | cloudness_icon(value.date, response.period) %}
-
+
+
{% endfor %}
{% endfor %}
diff --git a/static/src/index.ts b/static/src/index.ts
index d3374d8..518e85c 100644
--- a/static/src/index.ts
+++ b/static/src/index.ts
@@ -4,3 +4,5 @@ import "./app/common/tooltips";
import "./app/components/app-link";
import "./app/schedule";
import "./app/weather";
+import { init } from "./lib/weather-icons";
+init("/static/weather-icons/icons");
diff --git a/static/src/lib/weather-icons/icons/wi-cloud.svg b/static/src/lib/weather-icons/icons/wi-cloud.svg
index fa77599..9903eed 100644
--- a/static/src/lib/weather-icons/icons/wi-cloud.svg
+++ b/static/src/lib/weather-icons/icons/wi-cloud.svg
@@ -1,13 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-cloudy.svg b/static/src/lib/weather-icons/icons/wi-cloudy.svg
index c3eaf41..aed0969 100644
--- a/static/src/lib/weather-icons/icons/wi-cloudy.svg
+++ b/static/src/lib/weather-icons/icons/wi-cloudy.svg
@@ -1,18 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-cloudy.svg b/static/src/lib/weather-icons/icons/wi-day-cloudy.svg
index cf63543..4e847e1 100644
--- a/static/src/lib/weather-icons/icons/wi-day-cloudy.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-cloudy.svg
@@ -1,26 +1,11 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-hail.svg b/static/src/lib/weather-icons/icons/wi-day-hail.svg
index b813a6f..579c1e0 100644
--- a/static/src/lib/weather-icons/icons/wi-day-hail.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-hail.svg
@@ -1,42 +1,19 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-lightning.svg b/static/src/lib/weather-icons/icons/wi-day-lightning.svg
index 18413ed..7b16f36 100644
--- a/static/src/lib/weather-icons/icons/wi-day-lightning.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-lightning.svg
@@ -1,29 +1,12 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-rain-mix.svg b/static/src/lib/weather-icons/icons/wi-day-rain-mix.svg
index 8a5582d..8509e44 100644
--- a/static/src/lib/weather-icons/icons/wi-day-rain-mix.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-rain-mix.svg
@@ -1,49 +1,22 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-rain.svg b/static/src/lib/weather-icons/icons/wi-day-rain.svg
index 12b1219..dd29de6 100644
--- a/static/src/lib/weather-icons/icons/wi-day-rain.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-rain.svg
@@ -1,35 +1,16 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-showers.svg b/static/src/lib/weather-icons/icons/wi-day-showers.svg
index cd0cb0a..cd3c795 100644
--- a/static/src/lib/weather-icons/icons/wi-day-showers.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-showers.svg
@@ -1,43 +1,19 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-snow.svg b/static/src/lib/weather-icons/icons/wi-day-snow.svg
index c1f1c71..fcc72af 100644
--- a/static/src/lib/weather-icons/icons/wi-day-snow.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-snow.svg
@@ -1,40 +1,20 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-storm-showers.svg b/static/src/lib/weather-icons/icons/wi-day-storm-showers.svg
index 0166299..dd03129 100644
--- a/static/src/lib/weather-icons/icons/wi-day-storm-showers.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-storm-showers.svg
@@ -1,38 +1,18 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-sunny.svg b/static/src/lib/weather-icons/icons/wi-day-sunny.svg
index eafcd77..a50fabf 100644
--- a/static/src/lib/weather-icons/icons/wi-day-sunny.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-sunny.svg
@@ -1,27 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-day-thunderstorm.svg b/static/src/lib/weather-icons/icons/wi-day-thunderstorm.svg
index 006a8e5..4a4ff5f 100644
--- a/static/src/lib/weather-icons/icons/wi-day-thunderstorm.svg
+++ b/static/src/lib/weather-icons/icons/wi-day-thunderstorm.svg
@@ -1,34 +1,16 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-hail.svg b/static/src/lib/weather-icons/icons/wi-hail.svg
index 26c4b0d..571e9bc 100644
--- a/static/src/lib/weather-icons/icons/wi-hail.svg
+++ b/static/src/lib/weather-icons/icons/wi-hail.svg
@@ -1,30 +1,11 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-lightning.svg b/static/src/lib/weather-icons/icons/wi-lightning.svg
index 0709cf3..5f80807 100644
--- a/static/src/lib/weather-icons/icons/wi-lightning.svg
+++ b/static/src/lib/weather-icons/icons/wi-lightning.svg
@@ -1,9 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-alt-cloudy.svg b/static/src/lib/weather-icons/icons/wi-night-alt-cloudy.svg
index fcd1496..ba30b9c 100644
--- a/static/src/lib/weather-icons/icons/wi-night-alt-cloudy.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-alt-cloudy.svg
@@ -1,19 +1,4 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-alt-hail.svg b/static/src/lib/weather-icons/icons/wi-night-alt-hail.svg
index 38550e4..04d2850 100644
--- a/static/src/lib/weather-icons/icons/wi-night-alt-hail.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-alt-hail.svg
@@ -1,34 +1,12 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-alt-lightning.svg b/static/src/lib/weather-icons/icons/wi-night-alt-lightning.svg
index f01d745..40229a2 100644
--- a/static/src/lib/weather-icons/icons/wi-night-alt-lightning.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-alt-lightning.svg
@@ -1,21 +1,5 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-alt-rain-mix.svg b/static/src/lib/weather-icons/icons/wi-night-alt-rain-mix.svg
index 4ce81bc..a7bba51 100644
--- a/static/src/lib/weather-icons/icons/wi-night-alt-rain-mix.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-alt-rain-mix.svg
@@ -1,42 +1,15 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-alt-rain.svg b/static/src/lib/weather-icons/icons/wi-night-alt-rain.svg
index b4d8065..57ebb5f 100644
--- a/static/src/lib/weather-icons/icons/wi-night-alt-rain.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-alt-rain.svg
@@ -1,27 +1,9 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-alt-showers.svg b/static/src/lib/weather-icons/icons/wi-night-alt-showers.svg
index dd917e0..792be80 100644
--- a/static/src/lib/weather-icons/icons/wi-night-alt-showers.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-alt-showers.svg
@@ -1,34 +1,12 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-alt-snow.svg b/static/src/lib/weather-icons/icons/wi-night-alt-snow.svg
index b314bdd..7862603 100644
--- a/static/src/lib/weather-icons/icons/wi-night-alt-snow.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-alt-snow.svg
@@ -1,32 +1,13 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-alt-storm-showers.svg b/static/src/lib/weather-icons/icons/wi-night-alt-storm-showers.svg
index 6747df2..ed1a7c0 100644
--- a/static/src/lib/weather-icons/icons/wi-night-alt-storm-showers.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-alt-storm-showers.svg
@@ -1,31 +1,11 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-alt-thunderstorm.svg b/static/src/lib/weather-icons/icons/wi-night-alt-thunderstorm.svg
index 0af7a15..43a989c 100644
--- a/static/src/lib/weather-icons/icons/wi-night-alt-thunderstorm.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-alt-thunderstorm.svg
@@ -1,25 +1,9 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-night-clear.svg b/static/src/lib/weather-icons/icons/wi-night-clear.svg
index 053b2de..b105e8b 100644
--- a/static/src/lib/weather-icons/icons/wi-night-clear.svg
+++ b/static/src/lib/weather-icons/icons/wi-night-clear.svg
@@ -1,13 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-rain-mix.svg b/static/src/lib/weather-icons/icons/wi-rain-mix.svg
index 51cf189..e2d2c35 100644
--- a/static/src/lib/weather-icons/icons/wi-rain-mix.svg
+++ b/static/src/lib/weather-icons/icons/wi-rain-mix.svg
@@ -1,37 +1,14 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-rain.svg b/static/src/lib/weather-icons/icons/wi-rain.svg
index 7ecef3f..d7b5921 100644
--- a/static/src/lib/weather-icons/icons/wi-rain.svg
+++ b/static/src/lib/weather-icons/icons/wi-rain.svg
@@ -1,23 +1,8 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-showers.svg b/static/src/lib/weather-icons/icons/wi-showers.svg
index 3cb7e31..30cf107 100644
--- a/static/src/lib/weather-icons/icons/wi-showers.svg
+++ b/static/src/lib/weather-icons/icons/wi-showers.svg
@@ -1,31 +1,11 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-snow.svg b/static/src/lib/weather-icons/icons/wi-snow.svg
index 56afebf..a4ea3ad 100644
--- a/static/src/lib/weather-icons/icons/wi-snow.svg
+++ b/static/src/lib/weather-icons/icons/wi-snow.svg
@@ -1,27 +1,12 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-storm-showers.svg b/static/src/lib/weather-icons/icons/wi-storm-showers.svg
index df3fe0f..b8d2e99 100644
--- a/static/src/lib/weather-icons/icons/wi-storm-showers.svg
+++ b/static/src/lib/weather-icons/icons/wi-storm-showers.svg
@@ -1,26 +1,10 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-thunderstorm.svg b/static/src/lib/weather-icons/icons/wi-thunderstorm.svg
index 52555ec..f7e07a6 100644
--- a/static/src/lib/weather-icons/icons/wi-thunderstorm.svg
+++ b/static/src/lib/weather-icons/icons/wi-thunderstorm.svg
@@ -1,21 +1,8 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons/wi-wind-deg.svg b/static/src/lib/weather-icons/icons/wi-wind-deg.svg
index 3007410..282f5e8 100644
--- a/static/src/lib/weather-icons/icons/wi-wind-deg.svg
+++ b/static/src/lib/weather-icons/icons/wi-wind-deg.svg
@@ -1,12 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/static/src/lib/weather-icons/icons_optimizator.py b/static/src/lib/weather-icons/icons_optimizator.py
new file mode 100644
index 0000000..ba1bddb
--- /dev/null
+++ b/static/src/lib/weather-icons/icons_optimizator.py
@@ -0,0 +1,33 @@
+from pathlib import Path
+
+from lxml import etree
+
+
+def normalize_value(value: str) -> str:
+ try:
+ return f"{float(value):.2f}"
+ except ValueError:
+ pass
+ return value
+
+
+def icon_optimizator(file: Path):
+ source_size = file.stat().st_size
+ tree = etree.parse(file)
+ for node in tree.findall(".//{*}path"):
+ d = node.attrib["d"]
+ node.attrib["d"] = " ".join(map(normalize_value, d.split(" ")))
+ #file = file.parent.parent / "icons.tmp" / file.name
+ #file.parent.mkdir(parents=True, exist_ok=True)
+ tree.write(file)
+ target_size = file.stat().st_size
+ print(file.name, source_size, target_size)
+
+
+def icons_optimizator():
+ for file in (Path(__file__).parent / "icons").glob("*.svg"):
+ icon_optimizator(file)
+
+
+if __name__ == "__main__":
+ icons_optimizator()
diff --git a/static/src/lib/weather-icons/index.ts b/static/src/lib/weather-icons/index.ts
new file mode 100644
index 0000000..588f433
--- /dev/null
+++ b/static/src/lib/weather-icons/index.ts
@@ -0,0 +1,6 @@
+import { WeatherIconElement } from "./weather-icon";
+
+export const init = (iconsPath: string) => {
+ WeatherIconElement.iconsPath = iconsPath;
+ customElements.define("weather-icon", WeatherIconElement);
+};
diff --git a/static/src/lib/weather-icons/sass/_variables.scss b/static/src/lib/weather-icons/sass/_variables.scss
index cc0acf2..61dedac 100644
--- a/static/src/lib/weather-icons/sass/_variables.scss
+++ b/static/src/lib/weather-icons/sass/_variables.scss
@@ -1,4 +1,13 @@
$weather-icons-path: "../icons" !default;
+$weather-icons-stroke-color: #555555 !default;
+$weather-icons-colors: (
+ "sun": #ffdf22,
+ "cloud": #00c5c5,
+ "rain": #0d6efd,
+ "moon": #4A4B43,
+ "lightning": red,
+ "snow": white,
+) !default;
$weather-icons-included: (
"wi-cloud",
"wi-cloudy",
diff --git a/static/src/lib/weather-icons/sass/_weather-icons-colors.scss b/static/src/lib/weather-icons/sass/_weather-icons-colors.scss
new file mode 100644
index 0000000..8859d5b
--- /dev/null
+++ b/static/src/lib/weather-icons/sass/_weather-icons-colors.scss
@@ -0,0 +1,23 @@
+@use "variables";
+
+weather-icon {
+ display: flex;
+ width: 3rem;
+
+ > svg {
+ path {
+ fill: gray;
+ stroke: variables.$weather-icons-stroke-color;
+ stroke-width: 0.5;
+ //paint-order: stroke;
+ }
+ @each $type, $color in variables.$weather-icons-colors {
+ path[id="#{$type}"] {
+ fill: $color;
+ }
+ g[id="#{$type}"] > path {
+ fill: $color;
+ }
+ }
+ }
+}
diff --git a/static/src/lib/weather-icons/sass/weather-icons.scss b/static/src/lib/weather-icons/sass/weather-icons.scss
index 5763019..a4d243e 100644
--- a/static/src/lib/weather-icons/sass/weather-icons.scss
+++ b/static/src/lib/weather-icons/sass/weather-icons.scss
@@ -2,3 +2,4 @@
@use "weather-icons-base";
@use "weather-icons-list";
@use "weather-wind-aliases";
+@use "weather-icons-colors";
diff --git a/static/src/lib/weather-icons/weather-icon.ts b/static/src/lib/weather-icons/weather-icon.ts
new file mode 100644
index 0000000..2b50ef2
--- /dev/null
+++ b/static/src/lib/weather-icons/weather-icon.ts
@@ -0,0 +1,22 @@
+export class WeatherIconElement extends HTMLElement {
+ static iconsPath = "./icons";
+ static observedAttributes = ["icon"];
+
+ constructor() {
+ super();
+ const icon = this.getAttribute("icon");
+ if (icon) {
+ this.icon = icon;
+ }
+ }
+
+ set icon(value: string) {
+ console.log('!', WeatherIconElement.iconsPath);
+ const src = `${WeatherIconElement.iconsPath}/wi-${value}.svg`;
+ fetch(src)
+ .then((response) => response.text())
+ .then((data) => (this.innerHTML = data));
+ }
+}
+
+