Fix multiple issues with Icon components classes

I don't know what the hell the previous implementer had thought, but Icons rootClasses and wrapperClasses were thrown all over the place. It's somekind of savant miracle that it worked before. The guy must've had some extra terrestial knowledge about something.

So fix the class prop passing and fix the Thunderstorelogo in the Footer as non-fontawesome icons are not behaving nicely with accepting classes.

Author: Oksamies

apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css

@@ -40,8 +40,12 @@
   }
 
   .footer__logo {
-    flex-shrink: 0;
-    height: var(--footer-info-leftside-company-icon-height);
+    display: flex;
+    justify-content: center;
+
+    > svg {
+      height: var(--footer-info-leftside-company-icon-height);
+    }
   }
 
   .footer__icon-links {

packages/cyberstorm/src/newComponents/Icon/Icon.tsx

@@ -15,8 +15,11 @@ export const Icon = memo(function Icon(props: IconProps) {
       primitiveType="icon"
       {...forwardedProps}
       wrapperClasses={classnames(
+        props.noWrapper ? undefined : props.wrapperClasses
+      )}
+      rootClasses={classnames(
         ...componentClasses("icon", csVariant, undefined, undefined),
-        rootClasses
+        props.noWrapper ? rootClasses : undefined
       )}
     />
   );

packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx

@@ -220,49 +220,82 @@ export const Frame = memo(function Frame(
 
     const svgIconRef = ref as React.ForwardedRef<SVGElement>;
 
-    const clones = Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return cloneElement(child as React.ReactElement<any>, {
-          className: classnames(
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (child.props as any).className,
-            "icon",
-            noWrapper && csMode === "inline" ? "icon--inline" : null,
-            wrapperClasses
-          ),
-          ref: noWrapper ? svgIconRef : null,
-          ...svgFProps,
-        });
-      } else {
-        return null;
-      }
-    });
-
     let content = null;
 
     if (noWrapper) {
-      content = <>{clones}</>;
+      content = (
+        <>
+          {Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              return cloneElement(child as React.ReactElement<any>, {
+                className: classnames(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (child.props as any).className,
+                  "icon",
+                  csMode === "inline" ? "icon--inline" : null,
+                  rootClasses
+                ),
+                ref: svgIconRef,
+                ...svgFProps,
+              });
+            } else {
+              return null;
+            }
+          })}
+        </>
+      );
     } else if (csMode === "inline") {
       const spanIconRef = ref as React.ForwardedRef<HTMLSpanElement>;
       content = (
         <span
           {...strippedForwardedProps}
-          className={classnames("icon", "icon--inline", wrapperClasses)}
+          className={wrapperClasses}
           ref={spanIconRef}
         >
-          {clones}
+          {Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              return cloneElement(child as React.ReactElement<any>, {
+                className: classnames(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (child.props as any).className,
+                  "icon",
+                  "icon--inline",
+                  rootClasses
+                ),
+                ...svgFProps,
+              });
+            } else {
+              return null;
+            }
+          })}
         </span>
       );
     } else {
       const divIconRef = ref as React.ForwardedRef<HTMLDivElement>;
       content = (
         <div
           {...strippedForwardedProps}
-          className={classnames("icon", wrapperClasses)}
+          className={wrapperClasses}
           ref={divIconRef}
         >
-          {clones}
+          {Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              return cloneElement(child as React.ReactElement<any>, {
+                className: classnames(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (child.props as any).className,
+                  "icon",
+                  rootClasses
+                ),
+                ...svgFProps,
+              });
+            } else {
+              return null;
+            }
+          })}
         </div>
       );
     }