feat: add animation for icon

src/components/icons.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { styled } from 'goober';
+
+const StyledCheck = styled('i')`
+  & {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: 2px solid transparent;
+    border-radius: 100px;
+    color: #61d345;
+  }
+  &::after {
+    color: #61d345;
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    left: 4px;
+    top: -1px;
+    width: 9px;
+    height: 15px;
+    border-width: 0 3px 3px 0;
+    border-style: solid;
+    transform-origin: bottom left;
+    transform: rotate(45deg);
+  }
+`;
+export const Check: React.FC = () => {
+  return <StyledCheck />;
+};
+
+const StyledClose = styled('i')`
+  & {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: 2px solid transparent;
+    border-radius: 40px;
+    color: #ff4b4b;
+  }
+  &::after,
+  &::before {
+    color: ##ff4b4b;
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    width: 20px;
+    height: 3px;
+    background: currentColor;
+    transform: rotate(45deg);
+    top: 10px;
+    left: 4px;
+  }
+  &::after {
+    transform: rotate(-45deg);
+  }
+`;
+export const Close: React.FC = () => {
+  return <StyledClose />;
+};

src/components/toast-icon.tsx

@@ -1,26 +1,50 @@
+import { keyframes, setup, styled } from 'goober';
+import React from 'react';
 import { Toast } from '../core/types';
+import { Check, Close } from './icons';
+
+setup(React.createElement);
 
 interface ToastIconProps {
   icon?: Toast['icon'];
   type: Toast['type'];
 }
 
+const enter = keyframes`
+from {
+  transform: scale(0.6);
+  opacity: 0.4;
+}
+to {
+  transform: scale(1);
+  opacity: 1;
+}`;
+
+export const AnimatedIconWrapper = styled('div')`
+  position: relative;
+  transform: scale(0.6);
+  opacity: 0.4;
+  min-width: 20px;
+  animation: ${enter} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    forwards;
+`;
+
 export default function ToastIcon(props: ToastIconProps) {
   const { icon, type } = props;
 
   if (icon !== undefined) {
-    return icon;
+    return <AnimatedIconWrapper>{icon}</AnimatedIconWrapper>;
   }
 
   const renderIcon = () => {
     if (type === 'success') {
-      return '✅';
+      return <Check />;
     }
     if (type === 'error') {
-      return '❌';
+      return <Close />;
     }
     return null;
   };
 
-  return <div>{renderIcon()}</div>;
+  return <AnimatedIconWrapper>{renderIcon()}</AnimatedIconWrapper>;
 }