Fix the icon styled component and update the demo gif in docs

README.md

@@ -18,7 +18,7 @@ deployments are successful. All in one overview. This is all done via **webhooks
 
 ## Example
 
-![Dashboard demonstration](docs/images/dashboard.png)
+![Dashboard demonstration](docs/images/dashboard.gif)
 
 # :warning: version 3 :warning:
 

docs/index.md

@@ -5,4 +5,4 @@ deployments are successful. All in one overview. This is all done via **webhooks
 
 The time that deployments were scary is over, lets make them FUN!
 
-![dashboard example](images/dashboard.png)
+![dashboard example](images/dashboard.gif)

frontend/components/Icon/Icon.tsx

@@ -11,22 +11,27 @@ type Props = {
     title?: string;
 };
 
+type SpanProps = {
+    state?: State;
+};
+
+const Span = styled.span<SpanProps>`
+    ${(props) =>
+        props.state &&
+        css`
+            color: ${stateColor[props.state]};
+        `}
+`;
+
 const Icon = ({ icon, state, title }: Props): ReactElement => {
     const classes = ['icon'];
 
     if (['autorenew'].includes(icon)) {
         classes.push('spin');
     }
 
-    const Span = styled.span`
-        ${state &&
-        css`
-            color: ${stateColor[state]};
-        `}
-    `;
-
     return (
-        <Span className={classes.join(' ')} title={title || ''}>
+        <Span state={state} className={classes.join(' ')} title={title || ''}>
             {icon}
         </Span>
     );