refactor(static): refactor weather-icons lib

static/src/lib/weather-icons/sass/_variables.scss

@@ -0,0 +1,34 @@
+$weather-icons-path: "../icons" !default;
+$weather-icons-included: (
+  "wi-cloud",
+  "wi-cloudy",
+  "wi-day-cloudy",
+  "wi-day-hail",
+  "wi-day-lightning",
+  "wi-day-rain-mix",
+  "wi-day-rain",
+  "wi-day-showers",
+  "wi-day-snow",
+  "wi-day-storm-showers",
+  "wi-day-sunny",
+  "wi-day-thunderstorm",
+  "wi-hail",
+  "wi-lightning",
+  "wi-night-alt-cloudy",
+  "wi-night-alt-hail",
+  "wi-night-alt-lightning",
+  "wi-night-alt-rain-mix",
+  "wi-night-alt-rain",
+  "wi-night-alt-showers",
+  "wi-night-alt-snow",
+  "wi-night-alt-storm-showers",
+  "wi-night-alt-thunderstorm",
+  "wi-night-clear",
+  "wi-rain-mix",
+  "wi-rain",
+  "wi-showers",
+  "wi-snow",
+  "wi-storm-showers",
+  "wi-thunderstorm",
+  "wi-wind-deg"
+) !default;

static/src/lib/weather-icons/sass/_weather-icons-base.scss

@@ -0,0 +1,28 @@
+@use "variables";
+
+.wi {
+  display: inline-block;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: -0.125em;
+  width: 1em;
+  height: 1em;
+
+  mask-size: contain;
+  mask-position: 50%;
+  mask-repeat: no-repeat;
+  background-color: currentColor;
+
+  &.wi-l {
+    font-size: 2.5rem;
+  }
+  &.wi-xl {
+    font-size: 3.5rem;
+  }
+}
+
+@mixin weather-icon($icon) {
+  .#{$icon} {
+    mask-image: url(#{variables.$weather-icons-path}/#{$icon}.svg);
+  }
+}

static/src/lib/weather-icons/sass/_weather-icons-list.scss

@@ -0,0 +1,6 @@
+@use "variables";
+@use "weather-icons-base";
+
+@each $icon in variables.$weather-icons-included {
+  @include weather-icons-base.weather-icon($icon);
+}

static/src/lib/weather-icons/sass/_weather-wind-aliases.scss

@@ -0,0 +1,107 @@
+@mixin wind-rotate( $val: 0deg ) {
+  -webkit-transform: rotate($val);
+  -moz-transform: rotate($val);
+  -ms-transform: rotate($val);
+  -o-transform: rotate($val);
+  transform: rotate($val);
+}
+
+.wi-wind-calm {
+  display: none !important;
+}
+.wi-wind-towards-n    {
+  @include wind-rotate(0deg);
+}
+.wi-wind-towards-nne   {
+  @include wind-rotate(23deg);
+}
+.wi-wind-towards-ne    {
+  @include wind-rotate(45deg);
+}
+.wi-wind-towards-ene   {
+  @include wind-rotate(68deg);
+}
+.wi-wind-towards-e    {
+  @include wind-rotate(90deg);
+}
+.wi-wind-towards-ese   {
+  @include wind-rotate(113deg);
+}
+.wi-wind-towards-se    {
+  @include wind-rotate(135deg);
+}
+.wi-wind-towards-sse   {
+  @include wind-rotate(158deg);
+}
+.wi-wind-towards-s    {
+  @include wind-rotate(180deg);
+}
+.wi-wind-towards-ssw   {
+  @include wind-rotate(203deg);
+}
+.wi-wind-towards-sw    {
+  @include wind-rotate(225deg);
+}
+.wi-wind-towards-wsw   {
+  @include wind-rotate(248deg);
+}
+.wi-wind-towards-w    {
+  @include wind-rotate(270deg);
+}
+.wi-wind-towards-wnw   {
+  @include wind-rotate(293deg);
+}
+.wi-wind-towards-nw    {
+  @include wind-rotate(313deg);
+}
+.wi-wind-towards-nnw   {
+  @include wind-rotate(336deg);
+}
+.wi-wind-from-n    {
+  @include wind-rotate(180deg);
+}
+.wi-wind-from-nne   {
+  @include wind-rotate(180+23deg);
+}
+.wi-wind-from-ne    {
+  @include wind-rotate(180+45deg);
+}
+.wi-wind-from-ene   {
+  @include wind-rotate(180+68deg);
+}
+.wi-wind-from-e    {
+  @include wind-rotate(180+90deg);
+}
+.wi-wind-from-ese   {
+  @include wind-rotate(180+113deg);
+}
+.wi-wind-from-se    {
+  @include wind-rotate(180+135deg);
+}
+.wi-wind-from-sse   {
+  @include wind-rotate(180+158deg);
+}
+.wi-wind-from-s    {
+  @include wind-rotate(180+180deg);
+}
+.wi-wind-from-ssw   {
+  @include wind-rotate(180+203deg);
+}
+.wi-wind-from-sw    {
+  @include wind-rotate(180+225deg);
+}
+.wi-wind-from-wsw   {
+  @include wind-rotate(180+248deg);
+}
+.wi-wind-from-w    {
+  @include wind-rotate(180+270deg);
+}
+.wi-wind-from-wnw   {
+  @include wind-rotate(180+293deg);
+}
+.wi-wind-from-nw    {
+  @include wind-rotate(180+313deg);
+}
+.wi-wind-from-nnw   {
+  @include wind-rotate(180+336deg);
+}

static/src/lib/weather-icons/sass/weather-icons.scss

@@ -0,0 +1,4 @@
+@forward "variables";
+@use "weather-icons-base";
+@use "weather-icons-list";
+@use "weather-wind-aliases";