New spool icon updates

client/src/components/spoolIcon.tsx

@@ -1,10 +1,24 @@
 import "./spoolIcon.css";
 
-export default function SpoolIcon(props: { color: string | string[] }) {
-  const cols = Array.isArray(props.color) ? props.color : [props.color];
+interface Props {
+  color: string | { colors: string[]; vertical: boolean };
+  size?: "small" | "large";
+}
+
+export default function SpoolIcon(props: Props) {
+  let dirClass = "vertical";
+  let cols = [];
+  let size = props.size ? props.size : "small";
+
+  if (typeof props.color === "string") {
+    cols = [props.color];
+  } else {
+    dirClass = props.color.vertical ? "vertical" : "horizontal";
+    cols = props.color.colors;
+  }
 
   return (
-    <div className="spool-icon">
+    <div className={"spool-icon " + dirClass + " " + size}>
       {cols.map((col) => (
         <div
           key={col}