feat(ui): animate navigation and operation icons

src/entities/bank-card/ui/BankOperationIcon.tsx

@@ -1,7 +1,9 @@
 import type { FC } from "react";
+import { bindIconAnimation } from "@/shared/lib";
 import type { BankOperation } from "../api/queries";
 
 import { bankOperationAppearance } from "../model/operation-appearance";
+import classes from "./BankOperationIcon.module.css";
 
 type BankOperationIconProps = {
 	kind: BankOperation["kind"];
@@ -11,6 +13,8 @@ const BankOperationIcon: FC<BankOperationIconProps> = (props) => {
 	const icon = bankOperationAppearance(props.kind, props.categoryName);
 	return (
 		<svg
+			ref={bindIconAnimation}
+			className={`${classes.icon} ${icon.animation ? classes[icon.animation] : ""}`}
 			width="24"
 			height="24"
 			viewBox="0 0 24 24"
@@ -23,7 +27,9 @@ const BankOperationIcon: FC<BankOperationIconProps> = (props) => {
 			focusable="false"
 			style={{ flexShrink: 0, color: `var(--mantine-color-${icon.color}-7)` }}
 		>
-			<path d={icon.path} />
+			{icon.path.split(" M").map((part, index) => (
+				<path key={part} d={index ? `M${part}` : part} pathLength={1} />
+			))}
 		</svg>
 	);
 };