refactor: address frontend review feedback

packages/icons/src/OperationIcon/OperationIcon.module.css

@@ -1,4 +1,5 @@
 .icon {
+	flex-shrink: 0;
 	overflow: visible;
 
 	& path {

packages/icons/src/OperationIcon/OperationIcon.tsx

@@ -1,86 +1,72 @@
 import type { FC } from "react";
 
-import { bindIconAnimation } from "../bind-icon-animation";
-import classes from "./OperationIcon.module.css";
+import { BasketIcon } from "./svg/BasketIcon";
+import { CarIcon } from "./svg/CarIcon";
+import { CashWithdrawalIcon } from "./svg/CashWithdrawalIcon";
+import { CoffeeIcon } from "./svg/CoffeeIcon";
+import { DepositIcon } from "./svg/DepositIcon";
+import { DiceIcon } from "./svg/DiceIcon";
+import { DownloadIcon } from "./svg/DownloadIcon";
+import { EducationIcon } from "./svg/EducationIcon";
+import { GridIcon } from "./svg/GridIcon";
+import { GrowthIcon } from "./svg/GrowthIcon";
+import { HomeIcon } from "./svg/HomeIcon";
+import { MedicalIcon } from "./svg/MedicalIcon";
+import { MusicIcon } from "./svg/MusicIcon";
+import { RefundIcon } from "./svg/RefundIcon";
+import { RepaymentIcon } from "./svg/RepaymentIcon";
+import { ServerIcon } from "./svg/ServerIcon";
+import { ShieldIcon } from "./svg/ShieldIcon";
+import { ShoppingIcon } from "./svg/ShoppingIcon";
+import { SmokingIcon } from "./svg/SmokingIcon";
+import { SubscriptionsIcon } from "./svg/SubscriptionsIcon";
+import { TaxiIcon } from "./svg/TaxiIcon";
+import { TopupIcon } from "./svg/TopupIcon";
+import { TransferIcon } from "./svg/TransferIcon";
+import { TravelIcon } from "./svg/TravelIcon";
+import { WifiIcon } from "./svg/WifiIcon";
+import { WineIcon } from "./svg/WineIcon";
 
-const paths = {
-	basket:
-		"M3 9h18l-2 11H5L3 9Z M8 9l4-6 4 6 M9 13v3 M15 13v3 M10 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0",
-	car:
-		"M4 16H2v-4l3-1 3-4h6l4 4 4 1v4h-2 M8 16h8 M6 11h12m-6-4v4 M4 16a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-2v4m-2-2h4 M16 16a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-2v4m-2-2h4",
-	cashWithdrawal: "M4 10V3h16v7 M7 7h10v14H7V7Z M7 11h10 M10 16h4",
-	coffee:
-		"M4 8h12v7a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8Z M16 9h2a3 3 0 0 1 0 6h-2 M8 6c-2-1 2-2 0-4 M12 6c-2-1 2-2 0-4 M3 22h15",
-	deposit:
-		"M6 9a6 6 0 1 0 12 0a6 6 0 1 0-12 0 M10.5 12V6h2a1.5 1.5 0 0 1 0 3h-3m0 1.5h3 M4 16c0 4 16 4 16 0 M4 19c0 4 16 4 16 0",
-	dice:
-		"M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z M7 7h.01 M17 7h.01 M12 12h.01 M7 17h.01 M17 17h.01",
-	download: "M3 3h18v13H3V3Z M8 21h8 M12 16v5 M12 6v7 M9 10l3 3 3-3",
-	education: "M2 8l10-5 10 5-10 5L2 8Z M6 10v7c4 3 8 3 12 0v-7 M22 8v9",
-	grid: "M4 4h6v6H4V4Z M14 4h6v6h-6V4Z M4 14h6v6H4v-6Z M14 14h6v6h-6v-6Z",
-	growth: "M3 3v18h18 M6 15l5-5 4 3 6-8 M16 5h5v5",
-	home: "M3 11l9-8 9 8 M5 10v11h14V10 M9 21v-8h6v8",
-	medical: "M9 3h6v6h6v6h-6v6H9v-6H3V9h6V3Z",
-	music: "M9 5v14a3 3 0 1 1-3-3h3 M9 5l11-2v14a3 3 0 1 1-3-3h3 M9 9l11-2",
-	refund: "M8 4L3 9l5 5 M3 9h11a7 7 0 0 1 0 14",
-	repayment: "M3 5h18v14H3V5Z M3 9h18 M10 18v-7h3a2 2 0 0 1 0 4H9m0 1.5h4",
-	server:
-		"M3 3h18v7H3V3Z M3 14h18v7H3v-7Z M7 6.5h.01 M7 17.5h.01 M15 6.5h3 M15 17.5h3",
-	shield: "M12 2l8 4v6c0 5-8 10-8 10S4 17 4 12V6l8-4Z M8 12l3 3 5-6",
-	shopping: "M5 7h14l2 14H3L5 7Z M8 8V6a4 4 0 0 1 8 0v2",
-	smoking:
-		"M3 14h18v5H3v-5Z M16 14v5 M8 10V8c0-2 3-2 3-4V2 M15 10V8c0-2 3-2 3-4",
-	subscriptions:
-		"M4 10a8 8 0 0 1 13-6l3 3 M20 3v4h-4 M20 14a8 8 0 0 1-13 6l-3-3 M4 21v-4h4",
-	taxi:
-		"M4 10l2-6h12l2 6 M3 10h18v8H3v-8Z M6 18v3 M18 18v3 M6 14h2 M16 14h2 M10 4V2h4v2",
-	topup:
-		"M20 8V5H5a2 2 0 0 1 0-4h13v4 M3 3v16a2 2 0 0 0 2 2h15V8H5 M16 12v5m-2.5-2.5h5",
-	transfer: "M3 7h18l-4-4 M21 17H3l4 4",
-	travel: "M10 3h4v7l7 5v3l-7-3v5l2 1v1l-4-1-4 1v-1l2-1v-5l-7 3v-3l7-5V3Z",
-	wifi:
-		"M3 7a14 14 0 0 1 18 0 M6 11a9 9 0 0 1 12 0 M9 15a4 4 0 0 1 6 0 M12 19h.01",
-	wine:
-		"M7 3h10v5a5 5 0 0 1-10 0V3Z M7 7h10v1a5 5 0 0 1-10 0V7Z M12 13v8 M8 21h8",
-} as const;
+const icons = {
+	basket: BasketIcon,
+	car: CarIcon,
+	cashWithdrawal: CashWithdrawalIcon,
+	coffee: CoffeeIcon,
+	deposit: DepositIcon,
+	dice: DiceIcon,
+	download: DownloadIcon,
+	education: EducationIcon,
+	grid: GridIcon,
+	growth: GrowthIcon,
+	home: HomeIcon,
+	medical: MedicalIcon,
+	music: MusicIcon,
+	refund: RefundIcon,
+	repayment: RepaymentIcon,
+	server: ServerIcon,
+	shield: ShieldIcon,
+	shopping: ShoppingIcon,
+	smoking: SmokingIcon,
+	subscriptions: SubscriptionsIcon,
+	taxi: TaxiIcon,
+	topup: TopupIcon,
+	transfer: TransferIcon,
+	travel: TravelIcon,
+	wifi: WifiIcon,
+	wine: WineIcon,
+};
 
 type OperationIconProps = {
-	animation?: string;
 	color: string;
-	variant: keyof typeof paths;
+	variant: keyof typeof icons;
 };
 
 const OperationIcon: FC<OperationIconProps> = (props) => {
-	const { animation, color, variant } = props;
-	// eslint-disable-next-line security/detect-object-injection -- Animation keys select CSS module classes only.
-	const animationClass = animation ? classes[animation] : "";
+	const { color, variant } = props;
+	// eslint-disable-next-line security/detect-object-injection -- Variant is a closed key of the static icon registry.
+	const Icon = icons[variant];
 
-	// eslint-disable-next-line security/detect-object-injection -- Variant is a closed keyof the package geometry map.
-	const parts = paths[variant]
-		.split(" M")
-		.map((part, index) => ({ d: index ? `M${part}` : part, key: part }));
-
-	return (
-		<svg
-			aria-hidden="true"
-			className={`${classes.icon} ${animationClass}`}
-			fill="none"
-			focusable="false"
-			height="24"
-			ref={bindIconAnimation}
-			stroke="currentColor"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			strokeWidth="1.6"
-			style={{ color: `var(--mantine-color-${color}-7)`, flexShrink: 0 }}
-			viewBox="0 0 24 24"
-			width="24"
-		>
-			{parts.map(part => (
-				<path d={part.d} key={part.key} pathLength={1} />
-			))}
-		</svg>
-	);
+	return <Icon style={{ color: `var(--mantine-color-${color}-7)` }} />;
 };
 
 export { OperationIcon, type OperationIconProps };

packages/icons/src/OperationIcon/svg/BasketIcon.tsx

@@ -0,0 +1,40 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const BasketIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.basket}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 9h18l-2 11H5L3 9Z" pathLength={1} />
+
+			<path d="M8 9l4-6 4 6" pathLength={1} />
+
+			<path d="M9 13v3" pathLength={1} />
+
+			<path d="M15 13v3" pathLength={1} />
+
+			<path d="M10 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0" pathLength={1} />
+		</svg>
+	);
+};
+
+export { BasketIcon };

packages/icons/src/OperationIcon/svg/CarIcon.tsx

@@ -0,0 +1,40 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const CarIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.car}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M4 16H2v-4l3-1 3-4h6l4 4 4 1v4h-2" pathLength={1} />
+
+			<path d="M8 16h8" pathLength={1} />
+
+			<path d="M6 11h12m-6-4v4" pathLength={1} />
+
+			<path d="M4 16a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-2v4m-2-2h4" pathLength={1} />
+
+			<path d="M16 16a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-2v4m-2-2h4" pathLength={1} />
+		</svg>
+	);
+};
+
+export { CarIcon };

packages/icons/src/OperationIcon/svg/CashWithdrawalIcon.tsx

@@ -0,0 +1,38 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const CashWithdrawalIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M4 10V3h16v7" pathLength={1} />
+
+			<path d="M7 7h10v14H7V7Z" pathLength={1} />
+
+			<path d="M7 11h10" pathLength={1} />
+
+			<path d="M10 16h4" pathLength={1} />
+		</svg>
+	);
+};
+
+export { CashWithdrawalIcon };

packages/icons/src/OperationIcon/svg/CoffeeIcon.tsx

@@ -0,0 +1,40 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const CoffeeIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.coffee}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M4 8h12v7a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8Z" pathLength={1} />
+
+			<path d="M16 9h2a3 3 0 0 1 0 6h-2" pathLength={1} />
+
+			<path d="M8 6c-2-1 2-2 0-4" pathLength={1} />
+
+			<path d="M12 6c-2-1 2-2 0-4" pathLength={1} />
+
+			<path d="M3 22h15" pathLength={1} />
+		</svg>
+	);
+};
+
+export { CoffeeIcon };

packages/icons/src/OperationIcon/svg/DepositIcon.tsx

@@ -0,0 +1,38 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const DepositIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.deposit}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M6 9a6 6 0 1 0 12 0a6 6 0 1 0-12 0" pathLength={1} />
+
+			<path d="M10.5 12V6h2a1.5 1.5 0 0 1 0 3h-3m0 1.5h3" pathLength={1} />
+
+			<path d="M4 16c0 4 16 4 16 0" pathLength={1} />
+
+			<path d="M4 19c0 4 16 4 16 0" pathLength={1} />
+		</svg>
+	);
+};
+
+export { DepositIcon };

packages/icons/src/OperationIcon/svg/DiceIcon.tsx

@@ -0,0 +1,42 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const DiceIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z" pathLength={1} />
+
+			<path d="M7 7h.01" pathLength={1} />
+
+			<path d="M17 7h.01" pathLength={1} />
+
+			<path d="M12 12h.01" pathLength={1} />
+
+			<path d="M7 17h.01" pathLength={1} />
+
+			<path d="M17 17h.01" pathLength={1} />
+		</svg>
+	);
+};
+
+export { DiceIcon };

packages/icons/src/OperationIcon/svg/DownloadIcon.tsx

@@ -0,0 +1,40 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const DownloadIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 3h18v13H3V3Z" pathLength={1} />
+
+			<path d="M8 21h8" pathLength={1} />
+
+			<path d="M12 16v5" pathLength={1} />
+
+			<path d="M12 6v7" pathLength={1} />
+
+			<path d="M9 10l3 3 3-3" pathLength={1} />
+		</svg>
+	);
+};
+
+export { DownloadIcon };

packages/icons/src/OperationIcon/svg/EducationIcon.tsx

@@ -0,0 +1,36 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const EducationIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M2 8l10-5 10 5-10 5L2 8Z" pathLength={1} />
+
+			<path d="M6 10v7c4 3 8 3 12 0v-7" pathLength={1} />
+
+			<path d="M22 8v9" pathLength={1} />
+		</svg>
+	);
+};
+
+export { EducationIcon };

packages/icons/src/OperationIcon/svg/GridIcon.tsx

@@ -0,0 +1,38 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const GridIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.grid}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M4 4h6v6H4V4Z" pathLength={1} />
+
+			<path d="M14 4h6v6h-6V4Z" pathLength={1} />
+
+			<path d="M4 14h6v6H4v-6Z" pathLength={1} />
+
+			<path d="M14 14h6v6h-6v-6Z" pathLength={1} />
+		</svg>
+	);
+};
+
+export { GridIcon };

packages/icons/src/OperationIcon/svg/GrowthIcon.tsx

@@ -0,0 +1,36 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const GrowthIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.growth}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 3v18h18" pathLength={1} />
+
+			<path d="M6 15l5-5 4 3 6-8" pathLength={1} />
+
+			<path d="M16 5h5v5" pathLength={1} />
+		</svg>
+	);
+};
+
+export { GrowthIcon };

packages/icons/src/OperationIcon/svg/HomeIcon.tsx

@@ -0,0 +1,36 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const HomeIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 11l9-8 9 8" pathLength={1} />
+
+			<path d="M5 10v11h14V10" pathLength={1} />
+
+			<path d="M9 21v-8h6v8" pathLength={1} />
+		</svg>
+	);
+};
+
+export { HomeIcon };

packages/icons/src/OperationIcon/svg/MedicalIcon.tsx

@@ -0,0 +1,32 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const MedicalIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M9 3h6v6h6v6h-6v6H9v-6H3V9h6V3Z" pathLength={1} />
+		</svg>
+	);
+};
+
+export { MedicalIcon };

packages/icons/src/OperationIcon/svg/MusicIcon.tsx

@@ -0,0 +1,36 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const MusicIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M9 5v14a3 3 0 1 1-3-3h3" pathLength={1} />
+
+			<path d="M9 5l11-2v14a3 3 0 1 1-3-3h3" pathLength={1} />
+
+			<path d="M9 9l11-2" pathLength={1} />
+		</svg>
+	);
+};
+
+export { MusicIcon };

packages/icons/src/OperationIcon/svg/RefundIcon.tsx

@@ -0,0 +1,34 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const RefundIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M8 4L3 9l5 5" pathLength={1} />
+
+			<path d="M3 9h11a7 7 0 0 1 0 14" pathLength={1} />
+		</svg>
+	);
+};
+
+export { RefundIcon };

packages/icons/src/OperationIcon/svg/RepaymentIcon.tsx

@@ -0,0 +1,36 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const RepaymentIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.repayment}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 5h18v14H3V5Z" pathLength={1} />
+
+			<path d="M3 9h18" pathLength={1} />
+
+			<path d="M10 18v-7h3a2 2 0 0 1 0 4H9m0 1.5h4" pathLength={1} />
+		</svg>
+	);
+};
+
+export { RepaymentIcon };

packages/icons/src/OperationIcon/svg/ServerIcon.tsx

@@ -0,0 +1,42 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const ServerIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.server}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 3h18v7H3V3Z" pathLength={1} />
+
+			<path d="M3 14h18v7H3v-7Z" pathLength={1} />
+
+			<path d="M7 6.5h.01" pathLength={1} />
+
+			<path d="M7 17.5h.01" pathLength={1} />
+
+			<path d="M15 6.5h3" pathLength={1} />
+
+			<path d="M15 17.5h3" pathLength={1} />
+		</svg>
+	);
+};
+
+export { ServerIcon };

packages/icons/src/OperationIcon/svg/ShieldIcon.tsx

@@ -0,0 +1,34 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const ShieldIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M12 2l8 4v6c0 5-8 10-8 10S4 17 4 12V6l8-4Z" pathLength={1} />
+
+			<path d="M8 12l3 3 5-6" pathLength={1} />
+		</svg>
+	);
+};
+
+export { ShieldIcon };

packages/icons/src/OperationIcon/svg/ShoppingIcon.tsx

@@ -0,0 +1,34 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const ShoppingIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M5 7h14l2 14H3L5 7Z" pathLength={1} />
+
+			<path d="M8 8V6a4 4 0 0 1 8 0v2" pathLength={1} />
+		</svg>
+	);
+};
+
+export { ShoppingIcon };

packages/icons/src/OperationIcon/svg/SmokingIcon.tsx

@@ -0,0 +1,38 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const SmokingIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 14h18v5H3v-5Z" pathLength={1} />
+
+			<path d="M16 14v5" pathLength={1} />
+
+			<path d="M8 10V8c0-2 3-2 3-4V2" pathLength={1} />
+
+			<path d="M15 10V8c0-2 3-2 3-4" pathLength={1} />
+		</svg>
+	);
+};
+
+export { SmokingIcon };

packages/icons/src/OperationIcon/svg/SubscriptionsIcon.tsx

@@ -0,0 +1,38 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const SubscriptionsIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M4 10a8 8 0 0 1 13-6l3 3" pathLength={1} />
+
+			<path d="M20 3v4h-4" pathLength={1} />
+
+			<path d="M20 14a8 8 0 0 1-13 6l-3-3" pathLength={1} />
+
+			<path d="M4 21v-4h4" pathLength={1} />
+		</svg>
+	);
+};
+
+export { SubscriptionsIcon };

packages/icons/src/OperationIcon/svg/TaxiIcon.tsx

@@ -0,0 +1,44 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const TaxiIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M4 10l2-6h12l2 6" pathLength={1} />
+
+			<path d="M3 10h18v8H3v-8Z" pathLength={1} />
+
+			<path d="M6 18v3" pathLength={1} />
+
+			<path d="M18 18v3" pathLength={1} />
+
+			<path d="M6 14h2" pathLength={1} />
+
+			<path d="M16 14h2" pathLength={1} />
+
+			<path d="M10 4V2h4v2" pathLength={1} />
+		</svg>
+	);
+};
+
+export { TaxiIcon };

packages/icons/src/OperationIcon/svg/TopupIcon.tsx

@@ -0,0 +1,36 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const TopupIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.topup}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M20 8V5H5a2 2 0 0 1 0-4h13v4" pathLength={1} />
+
+			<path d="M3 3v16a2 2 0 0 0 2 2h15V8H5" pathLength={1} />
+
+			<path d="M16 12v5m-2.5-2.5h5" pathLength={1} />
+		</svg>
+	);
+};
+
+export { TopupIcon };

packages/icons/src/OperationIcon/svg/TransferIcon.tsx

@@ -0,0 +1,34 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const TransferIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.transfer}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 7h18l-4-4" pathLength={1} />
+
+			<path d="M21 17H3l4 4" pathLength={1} />
+		</svg>
+	);
+};
+
+export { TransferIcon };

packages/icons/src/OperationIcon/svg/TravelIcon.tsx

@@ -0,0 +1,32 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const TravelIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={classes.icon}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M10 3h4v7l7 5v3l-7-3v5l2 1v1l-4-1-4 1v-1l2-1v-5l-7 3v-3l7-5V3Z" pathLength={1} />
+		</svg>
+	);
+};
+
+export { TravelIcon };

packages/icons/src/OperationIcon/svg/WifiIcon.tsx

@@ -0,0 +1,38 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const WifiIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.wifi}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 7a14 14 0 0 1 18 0" pathLength={1} />
+
+			<path d="M6 11a9 9 0 0 1 12 0" pathLength={1} />
+
+			<path d="M9 15a4 4 0 0 1 6 0" pathLength={1} />
+
+			<path d="M12 19h.01" pathLength={1} />
+		</svg>
+	);
+};
+
+export { WifiIcon };

packages/icons/src/OperationIcon/svg/WineIcon.tsx

@@ -0,0 +1,38 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../../types";
+
+import { bindIconAnimation } from "../../bind-icon-animation";
+import classes from "../OperationIcon.module.css";
+
+const WineIcon: FC<IconProps> = (props) => {
+	const { size = 24, ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={`${classes.icon} ${classes.wine}`}
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.6"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M7 3h10v5a5 5 0 0 1-10 0V3Z" pathLength={1} />
+
+			<path d="M7 7h10v1a5 5 0 0 1-10 0V7Z" pathLength={1} />
+
+			<path d="M12 13v8" pathLength={1} />
+
+			<path d="M8 21h8" pathLength={1} />
+		</svg>
+	);
+};
+
+export { WineIcon };