Fix not loading icons

Brugarolas · Sep 18, 2021 · 3f3fcac · 3f3fcac
1 parent a42d89a
commit 3f3fcac
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 125 deletions.
diff --git a/src/assets/styles/icons.less b/src/assets/styles/icons.less
diff --git a/src/constants/icons.js b/src/constants/icons.js
@@ -0,0 +1,44 @@
+/** Icon assets: Check https://www.amcharts.com/free-animated-svg-weather-icons/ */
+import thunder from '@/assets/amcharts-weather-icons/animated/thunder.svg';
+import rainy2 from '@/assets/amcharts-weather-icons/animated/rainy-2.svg';
+import rainy3 from '@/assets/amcharts-weather-icons/animated/rainy-3.svg';
+import rainy4 from '@/assets/amcharts-weather-icons/animated/rainy-4.svg';
+import rainy5 from '@/assets/amcharts-weather-icons/animated/rainy-5.svg';
+import rainy6 from '@/assets/amcharts-weather-icons/animated/rainy-6.svg';
+import rainy7 from '@/assets/amcharts-weather-icons/animated/rainy-7.svg';
+import snowy2 from '@/assets/amcharts-weather-icons/animated/snowy-2.svg';
+import snowy3 from '@/assets/amcharts-weather-icons/animated/snowy-3.svg';
+import snowy4 from '@/assets/amcharts-weather-icons/animated/snowy-4.svg';
+import snowy5 from '@/assets/amcharts-weather-icons/animated/snowy-5.svg';
+import snowy6 from '@/assets/amcharts-weather-icons/animated/snowy-6.svg';
+import day from '@/assets/amcharts-weather-icons/animated/day.svg';
+import night from '@/assets/amcharts-weather-icons/animated/night.svg';
+import cloudyDay1 from '@/assets/amcharts-weather-icons/animated/cloudy-day-1.svg';
+import cloudyDay3 from '@/assets/amcharts-weather-icons/animated/cloudy-day-3.svg';
+import cloudyNight1 from '@/assets/amcharts-weather-icons/animated/cloudy-night-1.svg';
+import cloudyNight3 from '@/assets/amcharts-weather-icons/animated/cloudy-night-3.svg';
+import cloudy from '@/assets/amcharts-weather-icons/animated/cloudy.svg';
+
+const WeatherIcons = {
+    thunder,
+    rainy2,
+    rainy3,
+    rainy4,
+    rainy5,
+    rainy6,
+    rainy7,
+    snowy2,
+    snowy3,
+    snowy4,
+    snowy5,
+    snowy6,
+    day,
+    night,
+    cloudyDay1,
+    cloudyDay3,
+    cloudyNight1,
+    cloudyNight3,
+    cloudy
+};
+
+export default WeatherIcons;
diff --git a/src/ui/components/icon.js b/src/ui/components/icon.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import clsx from 'clsx';
+import Icons from '@/constants/icons.js';
 import './icon.less';
 
 /** Icon CSS classes: check https://openweathermap.org/weather-conditions */
-var classes = {
+const classes = {
   thunderstorm: ['thunderstorm with light rain', 'thunderstorm with rain', 'thunderstorm with heavy rain', 'light thunderstorm', 'thunderstorm', 'heavy thunderstorm', 'ragged thunderstorm', 'ragged thunderstorm', 'thunderstorm with light drizzle', 'thunderstorm with drizzle', 'thunderstorm with heavy drizzle'],
   lightrain: ['light intensity drizzle', 'drizzle', 'light intensity drizzle rain', 'light rain'],
   rain: ['heavy intensity drizzle', 'drizzle rain', 'shower drizzle', 'moderate rain', 'light intensity shower rain'],
@@ -18,6 +19,52 @@ var classes = {
   darkclouds: ['broken clouds', 'overcast clouds']
 };
 
+const icons = {
+  thunderstorm: {
+    default: Icons.thunder
+  },
+  lightrain: {
+    day: Icons.rainy2,
+    night: Icons.rainy4
+  },
+  rain: {
+    day: Icons.rainy3,
+    night: Icons.rainy5
+  },
+  heavyrain: {
+    default: Icons.rainy6
+  },
+  hail: {
+    default: Icons.rainy7
+  },
+  lightsnow: {
+    day: Icons.snowy2,
+    night: Icons.snowy4
+  },
+  snow: {
+    day: Icons.snowy3,
+    night: Icons.snowy5
+  },
+  heavysnow: {
+    default: Icons.snowy6
+  },
+  clear: {
+    day: Icons.day,
+    night: Icons.night
+  },
+  fewclouds: {
+    day: Icons.cloudyDay1,
+    night: Icons.cloudyNight1
+  },
+  clouds: {
+    day: Icons.cloudyDay3,
+    night: Icons.cloudyNight3
+  },
+  darkclouds: {
+    default: Icons.cloudy
+  }
+}
+
 const weathers = { };
 
 Object.entries(classes).forEach(([cssClass, weathersDesc]) => {
@@ -28,10 +75,14 @@ Object.entries(classes).forEach(([cssClass, weathersDesc]) => {
 
 /** Icon react */
 const Icon = (props) => {
-  const classNames = clsx('weather-icon', weathers[props.weather], props.daytime ? 'day' : 'night');
+  const weather = weathers[props.weather]
+  const daytime = props.daytime ? 'day' : 'night'
+
+  const classNames = clsx('weather-icon', weather, daytime);
+  const icon = icons[weather][daytime] || icons[weather].default
 
   return (
-    <i className={classNames} />
+    <img className={classNames} src={icon} />
   )
 }
 

diff --git a/src/ui/components/icon.less b/src/ui/components/icon.less
@@ -1,106 +1,11 @@
-@import (less, reference) "../../assets/styles/icons.less";
 @import (less, reference) '../../assets/styles/breakpoints.less';
 
 .weather-icon {
   width: 80px;
   height: 80px;
-  display: inline-block;
-  background-repeat: no-repeat;
-  background-attachment: scroll;
-  background-origin: padding-box;
-  background-clip: border-box;
-  background-size: contain;
-  background-image: @cloudyDay1;
-  margin: -20px;
-  margin-top: -26px;
 
   @media @tablet-above {
     width: 100px;
     height: 100px;
-    margin: -24px;
-    margin-top: -30px;
-  }
-
-  &.thunderstorm {
-    background-image: @thunder;
-  }
-
-  &.lightrain {
-    &.day {
-      background-image: @rainy2;
-    }
-    &.night {
-      background-image: @rainy4;
-    }
-  }
-
-  &.rain {
-    &.day {
-      background-image: @rainy3;
-    }
-    &.night {
-      background-image: @rainy5;
-    }
-  }
-
-  &.heavyrain {
-    background-image: @rainy6;
-  }
-
-  &.hail {
-    background-image: @rainy7;
-  }
-
-  &.lightsnow {
-    &.day {
-      background-image: @snowy2;
-    }
-    &.night {
-      background-image: @snowy4;
-    }
-  }
-
-  &.snow {
-    &.day {
-      background-image: @snowy3;
-    }
-    &.night {
-      background-image: @snowy5;
-    }
-  }
-
-  &.heavysnow {
-    background-image: @snowy6;
-  }
-
-  &.clear {
-    &.day {
-      background-image: @day;
-    }
-    &.night {
-      background-image: @night;
-    }
-  }
-
-  &.fewclouds {
-    &.day {
-      background-image: @cloudyDay1;
-    }
-    &.night {
-      background-image: @cloudyNight1;
-    }
-  }
-
-  &.clouds {
-    &.day {
-      background-image: @cloudyDay3;
-    }
-    &.night {
-      background-image: @cloudyNight3;
-    }
-  }
-
-  &.darkclouds {
-    background-image: @cloudy;
   }
 }
diff --git a/src/ui/components/weather.js b/src/ui/components/weather.js
@@ -52,9 +52,7 @@ class Weather extends SwingComponent {
           </div>
 
           <div className="column-2">
-            <div className="weather-icon-wrapper">
-              <Icon daytime={weather.daytime} weather={weather.descr} />
-            </div>
+            <Icon daytime={weather.daytime} weather={weather.descr} />
 
             <div className="temp">
               <span className="units">{ weather.temp}</span>

diff --git a/src/ui/components/weather.less b/src/ui/components/weather.less
@@ -17,7 +17,6 @@
   padding: 10px 25px;
   box-shadow: 0 1/8rem 1/8rem 0 @color-shadow;
 
-  height: 109px;
   will-change: height;
   transition: height 0.5s ease-in-out;
 
@@ -36,17 +35,18 @@
     }
 
     .column-1 {
-      display: inline-block;
       text-align: left;
 
       @media @small-down {
         text-align: center;
       }
     }
     .column-2 {
-      display: inline-block;
+      display: flex;
       flex-grow: 1;
       text-align: right;
+      align-items: center;
+      justify-content: flex-end;
       margin-right: 19px;
 
       @media @tablet-above {

diff --git a/webpack.config.js b/webpack.config.js
@@ -61,7 +61,8 @@ module.exports = (env, args) => {
             { loader: 'less-loader',
               options: {
                 lessOptions: {
-                  paths: [ path.resolve(__dirname, 'node_modules') ]
+                  paths: [ path.resolve(__dirname, 'node_modules') ],
+                  relativeUrls: true
                 }
               }
             }