From 40d7b624d769b3e4387479f647d29814787d41a4 Mon Sep 17 00:00:00 2001
From: minORC <min@openroad.ca>
Date: Thu, 11 Apr 2024 16:53:06 -0700
Subject: [PATCH] DBC22-1954: Updated custom icons

---
 .../src/Components/CurrentCameraIcon.js       |  4 +--
 src/frontend/src/Components/Filters.js        | 12 ++++-----
 src/frontend/src/Components/Pin.js            |  2 +-
 src/frontend/src/Components/WeatherIcon.js    | 26 ++++++++++++++++++-
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/Components/CurrentCameraIcon.js b/src/frontend/src/Components/CurrentCameraIcon.js
index be26226d..33731073 100644
--- a/src/frontend/src/Components/CurrentCameraIcon.js
+++ b/src/frontend/src/Components/CurrentCameraIcon.js
@@ -3,7 +3,7 @@ import React from 'react';
 export default function CurrentCameraIcon({variant}) {
   if (variant === 'outline') {
     return (
-      <svg width="18" height="19" viewBox="0 0 28 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="18" height="19" viewBox="0 0 28 19" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img">
         <path d="M0 3.16667C0 1.41444 1.38963 0 3.11111 0H15.5556C17.277 0 18.6667 1.41444 18.6667 3.16667V15.8333C18.6667 17.5856 17.277 19 15.5556 19H3.11111C1.38963 19 0 17.5856 0 15.8333V3.16667ZM3.11111 2.36444C2.67556 2.36444 2.32296 2.72333 2.32296 3.16667V15.8333C2.32296 16.2767 2.67556 16.6356 3.11111 16.6356H15.5556C15.9911 16.6356 16.3437 16.2767 16.3437 15.8333V3.16667C16.3437 2.72333 15.9911 2.36444 15.5556 2.36444H3.11111ZM25.677 14.7989V4.18L20.243 6.67111V4.07444L25.3037 1.75222C25.5526 1.64667 25.8222 1.58333 26.0919 1.58333C27.1496 1.58333 28.0207 2.47 28.0207 3.54667V15.4744C28.0207 16.5511 27.1496 17.4378 26.0919 17.4378C25.8222 17.4378 25.5526 17.3744 25.3037 17.2689L20.243 14.9467V12.35L25.677 14.8411V14.7989Z" fill="currentColor"/>
         <path d="M15.806 9.24669V9.66892C15.806 9.90114 15.6194 10.0911 15.3912 10.0911L14.4356 10.0911C14.1452 12.4345 12.32 14.2922 10.0178 14.5878V15.5778C10.0178 15.81 9.83112 16 9.60298 16H9.18816C8.96001 16 8.77335 15.81 8.77335 15.5778V14.5878C6.47112 14.2922 4.64594 12.4345 4.35557 10.0911L3.41481 10.0911C3.18667 10.0911 3 9.90114 3 9.66892V9.24669C3 9.01447 3.18667 8.82447 3.41481 8.82447L4.35557 8.82445C4.64594 6.48112 6.47112 4.62334 8.77335 4.32779L8.77332 3.42222C8.77332 3.19 8.95999 3 9.18814 3H9.60295C9.8311 3 10.0178 3.19 10.0178 3.42222L10.0178 4.32779C12.32 4.62334 14.1452 6.48112 14.4356 8.82445L15.3912 8.82447C15.6194 8.82447 15.806 9.01447 15.806 9.24669ZM13.0045 9.45779C13.0045 7.43112 11.3867 5.78445 9.39557 5.78445C7.40446 5.78445 5.78668 7.43112 5.78668 9.45779C5.78668 11.4845 7.40446 13.1311 9.39557 13.1311C11.3867 13.1311 13.0045 11.4845 13.0045 9.45779ZM11.8222 9.45779C11.8222 10.83 10.723 11.9278 9.39557 11.9278C8.06816 11.9278 6.9689 10.8089 6.9689 9.45779C6.9689 8.10668 8.06816 6.98779 9.39557 6.98779C10.723 6.98779 11.8222 8.10668 11.8222 9.45779ZM10.3911 9.45779C10.3911 8.88779 9.93483 8.44445 9.39557 8.44445C8.85631 8.44445 8.40001 8.9089 8.40001 9.45779C8.40001 10.0067 8.85631 10.4711 9.39557 10.4711C9.93483 10.4711 10.3911 10.0067 10.3911 9.45779Z" fill="currentColor" />
       </svg>
@@ -11,7 +11,7 @@ export default function CurrentCameraIcon({variant}) {
   }
   else {
     return (
-      <svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img">
         <path d="M6.91932 3.78946C6.20353 3.34736 5.3088 3.34736 4.56318 3.78946C3.84739 4.23157 3.40002 5.05262 3.40002 5.93683C3.40002 6.82104 3.84739 7.6421 4.56318 8.0842C5.27897 8.52631 6.17371 8.52631 6.91932 8.0842C7.63511 7.6421 8.08248 6.82104 8.08248 5.93683C8.08248 5.05262 7.63511 4.23157 6.91932 3.78946ZM7.0088 6.72631C6.74038 7.19999 6.26318 7.51578 5.72634 7.51578C5.1895 7.51578 4.71231 7.23157 4.44388 6.72631C4.17546 6.25262 4.17546 5.65262 4.44388 5.17894C4.71231 4.70525 5.1895 4.38946 5.72634 4.38946C6.26318 4.38946 6.74038 4.67368 7.0088 5.17894C7.27722 5.65262 7.27722 6.25262 7.0088 6.72631Z" fill="currentColor" />
         <path d="M9.45439 0H1.87895C0.835088 0 0 0.88421 0 1.98947V9.97895C0 11.0842 0.835088 11.9684 1.87895 11.9684H9.42456C10.4684 11.9684 11.3035 11.0842 11.3035 9.97895V1.98947C11.3035 0.88421 10.4684 0 9.42456 0H9.45439ZM9.84211 6.53684H9.21579C8.97719 8.08421 7.81403 9.31579 6.32281 9.6V10.2632C6.32281 10.6105 6.05439 10.8947 5.72632 10.8947C5.39825 10.8947 5.12982 10.6105 5.12982 10.2632V9.6C3.66842 9.34737 2.50526 8.11579 2.23684 6.53684H1.61053C1.28246 6.53684 1.01404 6.25263 1.01404 5.90526C1.01404 5.55789 1.28246 5.27368 1.61053 5.27368H2.23684C2.47544 3.72632 3.6386 2.49474 5.12982 2.21053V1.54737C5.12982 1.2 5.39825 0.915789 5.72632 0.915789C6.05439 0.915789 6.32281 1.2 6.32281 1.54737V2.21053C7.78421 2.46316 8.94737 3.69474 9.21579 5.27368H9.84211C10.1702 5.27368 10.4386 5.55789 10.4386 5.90526C10.4386 6.25263 10.1702 6.53684 9.84211 6.53684Z" fill="currentColor" />
         <path d="M16.5228 1.10525C16.2246 0.915773 15.8368 0.947352 15.5386 1.1684L12.7053 3.15788L12.2877 3.44209V8.5263L12.7053 8.81051L15.5386 10.8C15.8368 11.021 16.1947 11.021 16.5228 10.8631C16.8211 10.6737 17.0298 10.3579 17.0298 9.97893V1.98946C17.0298 1.61051 16.8509 1.29472 16.5228 1.10525Z" fill="currentColor" />
diff --git a/src/frontend/src/Components/Filters.js b/src/frontend/src/Components/Filters.js
index 8e865ecc..1cf2442f 100644
--- a/src/frontend/src/Components/Filters.js
+++ b/src/frontend/src/Components/Filters.js
@@ -11,7 +11,7 @@ import {
   faVideo,
   faSnowflake,
   faFerry,
-  faTemperatureHalf,
+  faSunCloud,
   faRestroom,
 } from '@fortawesome/pro-solid-svg-icons';
 import Button from 'react-bootstrap/Button';
@@ -171,7 +171,7 @@ export default function Filters(props) {
                   />
                   <label htmlFor="filter--major">
                     <span className="filter-item__icon">
-                    <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg" alt="major delays" aria-hidden="true" focusable="false" role="img">
                       <path className="filter-item__icon__path" d="M1.22269 6.84836L6.45493 1.61612C7.89977 0.171277 10.2423 0.171276 11.6872 1.61612L16.9194 6.84836C18.3642 8.2932 18.3642 10.6358 16.9194 12.0806L11.6872 17.3128C10.2423 18.7577 7.89977 18.7577 6.45493 17.3128L1.22269 12.0806C-0.222156 10.6358 -0.222157 8.2932 1.22269 6.84836ZM3.18478 8.81045C2.82357 9.17166 2.82357 9.7573 3.18478 10.1185L8.41702 15.3507C8.77823 15.712 9.36386 15.712 9.72507 15.3507L14.9573 10.1185C15.3185 9.7573 15.3185 9.17166 14.9573 8.81045L9.72507 3.57821C9.36386 3.217 8.77823 3.217 8.41702 3.57821L3.18478 8.81045Z"/>
                     </svg>
                     </span>
@@ -196,7 +196,7 @@ export default function Filters(props) {
                   />
                   <label htmlFor="filter--minor">
                     <span className="filter-item__icon">
-                    <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="minor delays" aria-hidden="true" focusable="false" role="img">
                       <path className="filter-item__icon__path" d="M15.501 0H2.50098C0.660978 0 -0.549022 1.65 0.250978 3.08L6.75098 14.77C7.66098 16.4 10.351 16.4 11.261 14.77L17.761 3.08C18.551 1.65 17.341 0 15.501 0ZM15.441 3.03L9.45098 13.81C9.45098 13.81 9.29098 14.01 8.94098 14.01C8.59098 14.01 8.46098 13.85 8.43098 13.81L2.59098 3.26C2.23098 2.61 2.48098 2 3.23098 2H14.961C15.551 2 15.741 2.51 15.451 3.03H15.441Z"/>
                     </svg>
                     </span>
@@ -271,7 +271,7 @@ export default function Filters(props) {
                   />
                   <label htmlFor="filter--road-conditions">
                     <span className="filter-item__icon">
-                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" alt="road conditions" aria-hidden="true" focusable="false" role="img">
                         <path className="filter-item__icon__path" d="M19.5625 8.8925L11.1125 0.4425C10.4825 -0.1475 9.5125 -0.1475 8.8825 0.4425L0.4425 8.8925C-0.1475 9.5225 -0.1475 10.4925 0.4425 11.1225L8.8925 19.5725C9.5225 20.1625 10.4925 20.1625 11.1225 19.5725L19.5725 11.1225C20.1625 10.4925 20.1625 9.5225 19.5725 8.8925H19.5625ZM8.9425 10.4525L5.5625 13.8325C5.3125 14.0625 4.9225 14.0625 4.6725 13.8325L1.2925 10.4525C1.0625 10.2025 1.0625 9.8125 1.2925 9.5625L4.6725 6.1825C4.9225 5.9525 5.3125 5.9525 5.5625 6.1825L8.9425 9.5625C9.1725 9.8125 9.1725 10.2025 8.9425 10.4525ZM18.7225 10.4525L15.3425 13.8325C15.0925 14.0625 14.7025 14.0625 14.4525 13.8325L11.0725 10.4525C10.8425 10.2025 10.8425 9.8125 11.0725 9.5625L14.4525 6.1825C14.7025 5.9525 15.0925 5.9525 15.3425 6.1825L18.7225 9.5625C18.9525 9.8125 18.9525 10.2025 18.7225 10.4525Z" fill="#195A97"/>
                       </svg>
                     </span>
@@ -317,7 +317,7 @@ export default function Filters(props) {
                   />
                   <label htmlFor="filter--weather">
                     <span className="filter-item__icon">
-                      <FontAwesomeIcon icon={faTemperatureHalf} alt="weather" />
+                      <FontAwesomeIcon icon={faSunCloud} alt="weather" />
                     </span>
                     Weather
                   </label>
@@ -336,7 +336,7 @@ export default function Filters(props) {
                   />
                   <label htmlFor="filter--rest-stops">
                     <span className="filter-item__icon">
-                      <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="rest stops" aria-hidden="true" focusable="false" role="img">
                         <path className="filter-item__icon__path" d="M19 3C19 3.1875 18.9688 3.34375 18.9375 3.5C19.5625 3.9375 20 4.6875 20 5.5C20 6.90625 18.875 8 17.5 8H17L17 15C17 15.5625 16.5312 16 16 16C15.4375 16 15 15.5625 15 15V8H14.5C13.0937 8 12 6.90625 12 5.5C12 4.6875 12.4062 3.9375 13.0312 3.5C13 3.34375 13 3.1875 13 3C13 1.34375 14.3438 0 16 0C17.6562 0 19 1.34375 19 3ZM1 7C1 6.46875 1.4375 6 2 6L10 6C10.5312 6 11 6.46875 11 7V9C11 9.5625 10.5312 10 10 10L2 10C1.4375 10 1 9.5625 1 9L1 7ZM1 11L11 11C11.5312 11 12 11.4688 12 12C12 12.5625 11.5312 13 11 13V15C11 15.5625 10.5312 16 10 16C9.4375 16 9 15.5625 9 15V13L3 13L3 15C3 15.5625 2.53125 16 2 16C1.4375 16 1 15.5625 1 15L1 13C0.4375 13 0 12.5625 0 12C0 11.4688 0.4375 11 1 11Z"/>
                       </svg>                    
                     </span>
diff --git a/src/frontend/src/Components/Pin.js b/src/frontend/src/Components/Pin.js
index cc4bcf93..ae195049 100644
--- a/src/frontend/src/Components/Pin.js
+++ b/src/frontend/src/Components/Pin.js
@@ -20,7 +20,7 @@ export default function Pin({role}) {
 
   return (
     <div ref={dragRef} className="pin" style={{opacity, transform: 'translate(0, 0)'}}>
-      <svg display="block" height="41px" width="27px" viewBox="0 0 27 41">
+      <svg display="block" height="41px" width="27px" viewBox="0 0 27 41" aria-hidden="true" focusable="false" role="img">
         <g fillRule="nonzero">
           <g transform="translate(3.0, 29.0)" fill="#000000">
             <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"></ellipse>
diff --git a/src/frontend/src/Components/WeatherIcon.js b/src/frontend/src/Components/WeatherIcon.js
index 3b34ca94..74907907 100644
--- a/src/frontend/src/Components/WeatherIcon.js
+++ b/src/frontend/src/Components/WeatherIcon.js
@@ -50,7 +50,31 @@ const ICONS = {
 export default function WeatherIcon({code, className}) {
   if (['45', '47', '48'].includes(code)) {
     // FIXME: replace with custom SVGs from design
-    return <FontAwesomeIcon className={className} icon={FA.faSun} />;
+    // return <FontAwesomeIcon className={className} icon={FA.faSun} />;
+    switch (code) {
+      case '45':
+        return (
+          <svg className="svg-inline--fa weather-icon" viewBox="0 0 512 512"  fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img">
+            <path d="M32 299.4c0-6.8 2.3-12.5 6.8-16.8c4.6-4.6 10.8-6.8 18.6-6.8H224.1c7.8 0 14 2.3 18.6 6.8c4.6 4.4 6.8 10 6.8 16.8c0 8.4-2.3 14.9-6.8 19.7c-4.4 4.6-10.6 6.8-18.6 6.8H57.5c-7.8 0-14-2.3-18.6-6.8c-4.6-4.8-6.8-11.3-6.8-19.7zm0-180c0-6.8 2.3-12.5 6.8-16.8S49.6 96 57.5 96h86.5c7.8 0 14 2.2 18.6 6.6c4.7 4.4 7.1 10 7.1 16.8c0 8.2-2.4 14.7-7.1 19.7c-4.6 4.8-10.8 7.1-18.6 7.1H57.5c-7.8 0-14-2.4-18.6-7.1s-6.8-11.3-6.8-19.7zM60.7 389.2c0-6.7 2.6-12.7 7.9-18.3c5.5-5.7 11.4-8.6 17.8-8.6c7.5 0 13.5 2.8 18.1 8.3c4.7 5.3 7.1 11.5 7.1 18.5c0 8.4-2.3 14.9-6.8 19.7c-4.4 4.8-10.5 7.1-18.3 7.1c-6.8 0-12.8-2.5-18.1-7.4c-5.1-4.9-7.7-11.4-7.7-19.4zm41.6-180.2c0-7 2.1-13.2 6.3-18.5c4.4-5.5 9.7-8.3 15.9-8.3c7.7 0 13.9 2.8 18.6 8.3c4.7 5.3 7.1 11.5 7.1 18.5c0 8.4-2.3 14.9-6.8 19.7s-10.9 7.1-18.9 7.1c-6.6 0-12-2.4-16.1-7.1c-4-4.9-6-11.5-6-19.7zm28.7 180.2c0-7 2.4-13.2 7.1-18.5c4.7-5.5 10.9-8.3 18.6-8.3H268.7l25.7 26.8c0 8-2.6 14.5-7.9 19.4c-5.1 4.9-11 7.4-17.8 7.4H156.8c-8 0-14.3-2.4-18.9-7.1c-4.6-4.9-6.8-11.5-6.8-19.7zm38.6-180.2c0-6.7 2.6-12.7 7.9-18.3c5.5-5.7 11.4-8.6 17.8-8.6H307.3c7.7 0 13.8 2.8 18.3 8.3c4.7 5.3 7.1 11.5 7.1 18.5c0 8.4-2.3 14.9-6.8 19.7s-10.8 7.1-18.6 7.1H195.4c-6.8 0-12.8-2.5-18.1-7.4c-5.1-4.9-7.7-11.4-7.7-19.4zm22.2-89.6c0-6.8 2.3-12.5 6.8-16.8c4.7-4.4 11-6.6 18.9-6.6H384.2c6.6 0 12.5 2.3 17.8 6.8s7.9 10.1 7.9 16.5c0 8-2.6 14.5-7.9 19.4c-5.1 4.9-11 7.4-17.8 7.4H217.5c-8 0-14.3-2.4-18.9-7.1c-4.6-4.9-6.8-11.5-6.8-19.7zm76.9 180c0-6.5 2.6-12 7.9-16.5c5.3-4.8 11.2-7.1 17.8-7.1s12.5 2.4 17.8 7.1c5.3 4.6 7.9 10.1 7.9 16.5c0 8-2.6 14.5-7.9 19.4c-5.1 4.8-11 7.1-17.8 7.1s-12.8-2.4-18.1-7.1c-5.1-4.9-7.7-11.4-7.7-19.4zm44.9 89.8c0-7 2.3-13.2 6.8-18.5c4.7-5.5 10.9-8.3 18.6-8.3h54.5c7.7 0 13.8 2.7 18.3 8c4.7 5.3 7.1 11.6 7.1 18.8c0 8.4-2.3 14.9-6.8 19.7c-4.4 4.8-10.6 7.1-18.6 7.1H339.1c-7.8 0-14-2.4-18.6-7.1s-6.8-11.3-6.8-19.7zm25.5-89.8c0-6.5 2.6-12 7.9-16.5c5.3-4.8 11.2-7.1 17.8-7.1h89.5c6.4 0 11.7 2.3 15.9 6.8s6.3 10.2 6.3 16.8c0 8.2-2.1 14.6-6.3 19.4c-4 4.8-9.3 7.1-15.9 7.1H364.8c-6.7 0-12.8-2.4-18.1-7.1c-5.1-4.9-7.7-11.4-7.7-19.4zm12.9-90.4c0-6.7 2.6-12.7 7.9-18.3c5.5-5.7 11.4-8.6 17.8-8.6h57.2c6.2 0 11.5 2.8 15.9 8.3s6.6 11.7 6.6 18.5c0 8.2-2.1 14.7-6.3 19.7c-4.2 4.8-9.6 7.1-16.1 7.1H377.6c-6.8 0-12.8-2.5-18.1-7.4c-5.1-4.9-7.7-11.4-7.7-19.4zm79.9-89.6c0-6.7 2.1-12.2 6.3-16.5c4.4-4.6 9.8-6.8 16.1-6.8c7.8 0 14 2.2 18.6 6.6c4.7 4.4 7.1 10 7.1 16.8c0 8.2-2.4 14.7-7.1 19.7c-4.6 4.8-10.8 7.1-18.6 7.1c-6.6 0-12-2.4-16.1-7.1c-4.2-4.9-6.3-11.5-6.3-19.7z"/>
+          </svg>
+        );
+      case '47':
+        return (
+          <svg className="svg-inline--fa weather-icon" viewBox="0 0 512 512"  fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img">
+            <path d="M367.7 103.3c13.5 3.4 36 11.8 50.4 31.6c12.9 17.9 16.5 40 11.5 66.4c-6.5 31.1-29 52.4-65 61.4c-15 3.8-29.4 4.6-38.7 4.6c-4.7 0-8-.2-9.4-.3l-8.3 0 16.4-33.3c7.1 .2 19.9-.3 32.8-3.7c22.9-6 35.8-17.6 39.6-35.6c3.5-16.3 1.7-29.6-5.5-39.4c-12.4-17.1-37.6-20.2-37.9-20.2c-6.7-.8-12.3-5.5-14.3-11.9c-5.8-19.1-14.6-31-26.4-35.3c-21.2-7.8-47.8 8.1-50 9.4l-.1 .1c-5 3.4-11.7 3.7-17.2 .6c-2.9-1.7-5.2-4.3-6.8-7.2c-4.1-7.3-29.3-36.2-65.4-19.7c-30.7 13.8-30.1 53.2-30.1 54.8c0 0 0 0 0 0c.2 6.6-3.5 12.7-9.4 15.6c-2.4 1.2-5.5 2.4-8.5 3.7c0 0 0 0 0 0c-2.7 1.1-7.3 2.9-8.8 3.8c-12.8 9.8-19.9 23.8-18.8 37c1.1 14.4 5.6 26 15.9 32.5c21.9 13.9 60.3 17.6 73.3 15.4c.9-.2 2-.2 2.9-.2l16.5 0L165 266.8c-21.6-1.8-51.2-7.5-71.9-22c-17.9-12.5-26.9-32.4-28.8-56.3c-2.1-24.6 10.3-50.1 32.2-66.7c3.3-2.6 7.7-4.6 13.5-7c.2 0 .3-.2 .3-.3c2.1-19.5 11.2-57.1 49-74.4c44.2-20 80.6 .9 99 21.1c.2 .2 .3 .3 .5 .2C274 54.6 299.5 47 323.9 56c19.4 7.2 34.2 22.9 43.4 47c0 .2 .2 .3 .3 .3zM210.7 423.2c-7.7 6.1-14.1 7.8-14.1 7.8c-25.7-2.9-12-26.1-11.8-26.1l41.4-81.4-14.6 0-45.8-.8c-20.6-7.8-7.3-23.5-7.3-23.5l133.9-108s3.2-3.7 8.5-3.7c2.7 0 5.9 .9 9.6 3.7c11.1 8.1 1.2 23.1 1.2 23.1l-28.1 57.1-5.8 11.5-7.3 12.7 50.7-.6c12.9 0 13.5 2.4 13.5 2.4c18.7 15-2.3 27.9-2.3 27.9s-114 91.8-121.7 97.9zM102 305.9c-.9-.2-2-.5-2.9-.9s-1.8-.9-2.6-1.4c-.9-.6-1.7-1.2-2.3-1.8s-1.4-1.5-1.8-2.3c-.6-.9-1.1-1.7-1.4-2.6s-.6-1.8-.9-2.9c-.2-.9-.3-2-.3-3.1c0-4 1.7-7.9 4.4-10.8c.8-.8 1.5-1.4 2.3-1.8c.8-.6 1.7-1.1 2.6-1.4s1.8-.6 2.9-.9c2-.5 3.9-.5 5.9 0c.9 .2 2 .5 2.9 .9c.8 .3 1.5 .7 2.2 1.1l.4 .2c.3 .2 .5 .4 .8 .6c.5 .4 1.1 .8 1.5 1.2c2.9 2.9 4.4 6.7 4.4 10.8c0 .9-.1 1.8-.3 2.7l-.1 .4c-.2 .9-.5 2-.9 2.9c-.3 .8-.7 1.5-1.1 2.2c0 0 0 0 0 0l-.2 .4c-.2 .3-.4 .5-.6 .8c-.4 .5-.8 1.1-1.2 1.5c-.8 .8-1.5 1.4-2.3 1.8c-.9 .6-1.7 1.1-2.6 1.4c0 0 0 0 0 0c-.9 .3-1.8 .6-2.9 .9c-1.1 .2-2.1 .3-3 .3c-1.1 0-2-.2-2.9-.3zM414.9 416.6c-.9 0-2-.2-3-.3c0 0 0 0 0 0c-.9-.2-2-.5-2.9-.9s-1.8-.9-2.6-1.4c-.3-.2-.5-.4-.8-.6c-.5-.4-1.1-.8-1.5-1.2c-2.9-2.9-4.4-6.7-4.4-10.8c0-.9 .2-2 .3-3.1s.5-2 .9-2.9c.3-.8 .7-1.5 1.1-2.2l.2-.4c.2-.3 .4-.5 .6-.8c0 0 0 0 0 0c.4-.5 .8-1.1 1.2-1.5c3.5-3.5 8.8-5.2 13.7-4.1c.9 .2 2 .5 2.9 .9c.8 .3 1.5 .7 2.2 1.1l.4 .2c.3 .2 .5 .4 .8 .6c.5 .4 1.1 .8 1.5 1.2c.8 .8 1.4 1.5 1.8 2.3c.6 .8 1.1 1.7 1.4 2.6s.6 1.8 .9 2.9c.2 .9 .3 2 .3 3.1c0 4-1.7 7.9-4.4 10.8c-.8 .8-1.5 1.4-2.3 1.8c-.8 .6-1.7 1.1-2.6 1.4s-1.8 .6-2.9 .9c0 0 0 0 0 0c-.9 .2-1.8 .3-2.9 .3zM172 386.1l-3.2 6.3c-1.8 3.4-6.7 13.1-5.9 24.3l-76 0c-8.3 0-15.2-6.9-15.2-15.3s6.8-15.3 15.2-15.3l85.2 0zM195.5 340l-11.4 22.3-97.3 0c-8.3 0-15.2-6.9-15.2-15.3s6.8-15.3 15.2-15.3l61.8 0c3 2.4 7 4.7 11.8 6.6l3.2 1.2 3.3 0 28.5 .5zm174.9-57.6c10.8-9.5 35.5-22 58-4.9c13.7 10.4 20.9 27 19.4 43.5c-1.7 16-11.5 29.3-26.9 36.5c-10.3 4.7-21.4 4.7-34.2 4.7l-71 0c15.2-12.1 27-21.5 29.9-24c1.7-1.2 4.6-3.5 7.6-6.6l33.5 0c10.6 0 17.3-.2 21.3-2c5.6-2.7 8.8-6.9 9.4-12.1c.6-5.8-2.3-11.9-7.4-15.9c-8.3-6.4-18.7 2.6-19.9 3.7l-.2 0c-2.7 3.1-6.7 4.9-11.1 4.9c-8.3 0-15.2-6.9-15.2-15.3c0-5.2 2.6-9.9 6.7-12.7zM218 480c-.9 0-2-.2-2.9-.3s-2-.5-2.9-.9c-.8-.3-1.5-.7-2.2-1.1l-.4-.2c-.9-.6-1.7-1.2-2.3-1.8s-1.4-1.5-1.8-2.3c-.6-.8-1.1-1.7-1.4-2.6c0 0 0 0 0 0c-.3-.9-.6-1.8-.9-2.9c-.2-.9-.3-2-.3-3.1c0-1 .1-1.8 .3-2.7l.1-.4c.2-1.1 .5-2 .9-2.9s.9-1.8 1.4-2.6c.2-.3 .4-.5 .6-.8c.4-.5 .8-1.1 1.2-1.5c.6-.6 1.5-1.4 2.3-1.8c.8-.6 1.7-1.1 2.6-1.4c0 0 0 0 0 0c.9-.3 1.8-.6 2.9-.9c2-.5 3.9-.5 5.9 0c.9 .2 2 .5 2.9 .9c.8 .3 1.5 .7 2.2 1.1l.4 .2c.9 .6 1.7 1.2 2.3 1.8c.8 .8 1.4 1.5 1.8 2.3c.6 .8 1.1 1.7 1.4 2.6c0 0 0 0 0 0c.3 .9 .6 1.8 .9 2.9s.3 2 .3 3.1c0 .9-.1 1.8-.3 2.7l-.1 .4c-.2 .9-.5 2-.9 2.9c-.3 .8-.7 1.5-1.1 2.2l-.2 .4c-.2 .3-.4 .5-.6 .8c-.4 .5-.8 1.1-1.2 1.5c-.8 .8-1.5 1.4-2.3 1.8c-.8 .6-1.7 1.1-2.6 1.4s-1.8 .6-2.9 .9c0 0 0 0 0 0c-1.1 .2-2.1 .3-3 .3zm119.1-89.2c15.3 7.2 25.2 20.5 26.9 36.5c1.7 16.3-5.8 33.1-19.4 43.4c-8 6.3-16.5 8.6-24.4 8.6c-14.6 0-27.6-7.8-34.3-14l.2-.2c-2.6-2.7-4.1-6.4-4.1-10.4c0-8.4 6.8-15.3 15.2-15.3c4.3 0 8.2 1.8 10.9 4.7c3.5 2.6 11.5 7.5 18.2 2.4c5.2-4 8-10.1 7.4-15.9c-.5-5.3-3.8-9.5-9.4-12.1c-3.8-1.8-10.6-2-21.2-2l-54.9 0c10.9-8.9 24.4-19.7 37.9-30.5c0 0 0 0 0 0l17 0c12.9 0 23.8 0 34.2 4.7z"/>
+          </svg>
+        );
+      case '48':
+        return (
+          <svg className="svg-inline--fa weather-icon" viewBox="0 0 512 512"  fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img">
+            <path d="M193 249.3s.1 .1 .2 .1c11.5 5.3 21.8 10.6 31.1 15.8v1h1.7c52.9 29.9 71.1 56.9 76.5 75.5c6.3 21.5-2.9 35.7-3.9 37.1c-5 6.2-4 14.7 2.3 20c3.2 2.7 7.3 4.1 11.5 4.1s7.9-1.2 11.1-3.6c55.2-41.6 84-82.9 85.6-122.8c1.6-38.2-23.2-60.4-24.2-61.2c-33.1-29.4-48.6-56.9-44.8-79.6c4.6-27.4 35.8-42.2 36.4-42.5c7-3.2 10.7-10.3 8.9-17.2c-1.8-6.9-8.6-11.8-16.5-11.8H100.5c-7.6 0-14.3 4.6-16.3 11.1c-13.8 44 1.2 88.4 43.2 128.3c30.4 28.8 64.2 45.2 65.7 45.9zM375.2 276c-1.2 21.2-13.9 44.4-37.5 68.5c-.5-3-1.1-6.1-2-9.4C329 311 311.6 288 283.6 266.2h91.3c.4 3.1 .6 6.3 .4 9.8zm-15.6-40.5h-124c-8.4-4.5-17.3-9-26.7-13.3c-1.7-.8-31.6-15.6-57.5-40.4c-.6-.6-1.1-1.1-1.7-1.7H315c8.7 18 23.6 36.5 44.6 55.4zM114.1 94.7H323.8c-7.9 9.5-14.6 21.4-17.1 35.8c-1.1 6.2-1.3 12.5-.7 18.9H125.2c-10.4-18-14.1-36.3-11.1-54.7zM463.9 422.1c-8.3-.6-33.1-9.4-51.2-17.3c-6.7-2.9-15.4-2.5-21.4 1.1c-26.1 15.6-54.5 20.6-84.3 14.7c-23.5-4.6-39.6-14.5-39.7-14.5c-6.7-4.3-17.1-4.3-23.9-.2c-26.4 16-54.8 21-84.6 15c-23.5-4.7-39.6-14.7-39.7-14.8c-6.5-4.2-16.5-4.4-23.4-.6c-23.6 13-49.4 17.3-49.9 17.4c-9.6 1.5-15.6 8.1-13.4 14.7c2.2 6.6 11.8 10.8 21.4 9.3c1.2-.2 26.2-4.2 52.8-16.3c9.2 4.4 23.3 10.1 40.6 13.7c10.3 2.2 22.4 3.7 35.7 3.7c21.8 0 46.9-4.3 72.7-17.3c9.2 4.3 23 9.7 40 13.2c27.1 5.6 67.2 7.3 108.8-13.8c15.3 6.2 39.9 15.3 55.7 16.4c9.8 .7 18.6-4.2 19.7-11s-6.1-12.8-16-13.5l0 0z"/>
+          </svg>
+        );
+      default:
+        return (
+          <FontAwesomeIcon className="weather-icon" icon={FA.faSunCloud} />
+        );
+    }
   } else if (ICONS[code]) {
     return <FontAwesomeIcon className={className} icon={ICONS[code]} />;
   }