beat animation

README.md

@@ -51,3 +51,25 @@ function Component() {
 | strokeWidth | number \| string | 32 or 16 |
 | className   | string           |          |
 | ...         | Other SVG Props  |          |
+
+### Animations
+
+#### Spin
+
+To spin a icon add the `spin` prop, if you want to adjust the speed, use the `animation-duration` css property
+
+```tsx
+function() {
+  return <SyncOutline spin />;
+}
+```
+
+#### Beat
+
+To spin a icon add the `beat` prop, if you want to adjust the speed, use the `animation-duration` css property
+
+```tsx
+function() {
+  return <SyncOutline beat />;
+}
+```

src/style.css

@@ -7,6 +7,18 @@
   }
 }
 
+@keyframes raresail-react-ionicon-beat {
+  0%,
+  50%,
+  100% {
+    transform: scale(1);
+  }
+  30%,
+  80% {
+    transform: scale(1.1);
+  }
+}
+
 .raresail-react-ionicon {
   box-sizing: content-box;
 }
@@ -17,3 +29,10 @@
   animation-timing-function: linear;
   animation-duration: 2500ms;
 }
+
+.raresail-react-ionicon[data-animation='beat'] {
+  animation-name: raresail-react-ionicon-beat;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease;
+  animation-duration: 1.5s;
+}

src/types.ts

@@ -3,4 +3,5 @@ import { SVGProps } from 'react';
 export interface IonIconProps
   extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'stroke'> {
   spin?: true;
+  beat?: true;
 }

templates/svg.js

@@ -11,13 +11,18 @@ function ${componentName}({
   strokeWidth,
   className,
   spin,
+  beat,
   ...props
 }: IonIconProps) {
   const animation = useMemo(() => {
     if (spin) {
       return 'spin';
     }
 
+    if (beat) {
+      return 'beat';
+    }
+
     return '';
   }, [spin]);