WeatherIcon. Small changes to theme state

client/src/components/UI/Icons/Icon/Icon.module.css

@@ -0,0 +1,6 @@
+.Icon {
+  color: var(--color-primary);
+  /* for settings */
+  /* color: var(--color-background); */
+  width: 90%;
+}

client/src/components/UI/Icons/Icon/Icon.tsx

@@ -0,0 +1,28 @@
+import classes from './Icon.module.css';
+
+import { Icon as MDIcon } from '@mdi/react';
+
+interface ComponentProps {
+  icon: string;
+  color?: string;
+}
+
+const Icon = (props: ComponentProps): JSX.Element => {
+  const MDIcons = require('@mdi/js');
+  let iconPath = MDIcons[props.icon];
+
+  if (!iconPath) {
+    console.log(`Icon ${props.icon} not found`);
+    iconPath = MDIcons.mdiCancel;
+  }
+
+  return (
+    <MDIcon
+      className={classes.Icon}
+      path={iconPath}
+      color={props.color ? props.color : 'var(--color-primary)'}
+    />
+  )
+}
+
+export default Icon;

client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { IconKey, Skycons } from 'skycons-ts';
+import { GlobalState, Theme } from '../../../../interfaces';
+
+interface ComponentProps {
+  theme: Theme;
+  icon: IconKey
+}
+
+const WeatherIcon = (props: ComponentProps): JSX.Element => {
+  const randomId = `icon-${Math.floor(Math.random() * 1000)}`;
+  useEffect(() => {
+    const delay = setTimeout(() => {
+      const skycons = new Skycons({'color': props.theme.colors.accent});
+      skycons.add(`weather-icon-${randomId}`, props.icon);
+      skycons.play();
+    }, 1);
+
+    return () => {
+      clearTimeout(delay);
+    }
+  }, []);
+
+  return <canvas id={`weather-icon-${randomId}`} width='50' height='50'></canvas>
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    theme: state.theme.theme
+  }
+}
+
+export default connect(mapStateToProps)(WeatherIcon);