refactor: enforce frontend view model boundaries

packages/icons/src/svg/AddIcon.tsx

@@ -4,6 +4,7 @@ import type { IconProps } from "../types";
 
 const AddIcon: FC<IconProps> = (props) => {
 	const { size = "24", ...svgProps } = props;
+
 	return (
 		<svg
 			aria-hidden="true"

packages/icons/src/svg/BondsIcon.tsx

@@ -0,0 +1,39 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+import { bindIconAnimation } from "../bind-icon-animation";
+import classes from "../navigation.module.css";
+
+const BondsIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3Z" />
+
+			<g className={classes.couponLines}>
+				<path d="M9 7h6" pathLength={1} />
+
+				<path d="M9 11h6" pathLength={1} />
+
+				<path d="M9 15h3" pathLength={1} />
+			</g>
+		</svg>
+	);
+};
+
+export { BondsIcon };

packages/icons/src/svg/CardsIcon.tsx

@@ -0,0 +1,39 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+import { bindIconAnimation } from "../bind-icon-animation";
+import classes from "../navigation.module.css";
+
+const CardsIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 5h18v14H3V5Zm0 4h18M6 15h4" />
+
+			<g className={classes.rubles}>
+				<path d="M10 12V4h3a2 2 0 0 1 0 4H9m0 2h4" />
+
+				<path d="M10 12V4h3a2 2 0 0 1 0 4H9m0 2h4" />
+
+				<path d="M10 12V4h3a2 2 0 0 1 0 4H9m0 2h4" />
+			</g>
+		</svg>
+	);
+};
+
+export { CardsIcon };

packages/icons/src/svg/CategoriesIcon.tsx

@@ -0,0 +1,27 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+const CategoriesIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			height={size}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" />
+		</svg>
+	);
+};
+
+export { CategoriesIcon };

packages/icons/src/svg/ContactlessIcon.tsx

@@ -0,0 +1,32 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+const ContactlessIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			height={size}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path
+				d="M7 11a8 8 0 0 1 0 8m5-12a15 15 0 0 1 0 16m5-20a23 23 0 0 1 0 24"
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeWidth="2"
+			/>
+		</svg>
+	);
+};
+
+export { ContactlessIcon };

packages/icons/src/svg/DeleteIcon.tsx

@@ -4,6 +4,7 @@ import type { IconProps } from "../types";
 
 const DeleteIcon: FC<IconProps> = (props) => {
 	const { size = "24", ...svgProps } = props;
+
 	return (
 		<svg
 			aria-hidden="true"

packages/icons/src/svg/EditIcon.tsx

@@ -4,6 +4,7 @@ import type { IconProps } from "../types";
 
 const EditIcon: FC<IconProps> = (props) => {
 	const { size = "24", ...svgProps } = props;
+
 	return (
 		<svg
 			aria-hidden="true"

packages/icons/src/svg/PortfolioIcon.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+import { bindIconAnimation } from "../bind-icon-animation";
+import classes from "../navigation.module.css";
+
+const PortfolioIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 10v9h18v-9" />
+
+			<path className={classes.portfolioHandle} d="M8 6V4h8v2" />
+
+			<path
+				className={classes.portfolioLid}
+				d="M3 10V8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2H3Zm6 0v3h6v-3"
+			/>
+
+			<path
+				className={classes.portfolioRuble}
+				d="M10 18v-7h3a2 2 0 0 1 0 4H9m0 1.5h4"
+			/>
+		</svg>
+	);
+};
+
+export { PortfolioIcon };

packages/icons/src/svg/RestoreIcon.tsx

@@ -0,0 +1,27 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+const RestoreIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			height={size}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 3h18v4H3z M5 7v14h14V7 M12 17V10m-3 3 3-3 3 3" />
+		</svg>
+	);
+};
+
+export { RestoreIcon };

packages/icons/src/svg/SettingsIcon.tsx

@@ -0,0 +1,35 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+import { bindIconAnimation } from "../bind-icon-animation";
+import classes from "../navigation.module.css";
+
+const SettingsIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M4 7h16M4 17h16" />
+
+			<path className={classes.topSlider} d="M10 4v6h4V4h-4Z" />
+
+			<path className={classes.bottomSlider} d="M10 14v6h4v-6h-4Z" />
+		</svg>
+	);
+};
+
+export { SettingsIcon };

packages/icons/src/svg/StocksIcon.tsx

@@ -0,0 +1,39 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+import { bindIconAnimation } from "../bind-icon-animation";
+import classes from "../navigation.module.css";
+
+const StocksIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			height={size}
+			ref={bindIconAnimation}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<path d="M3 3v18h18" />
+
+			<path
+				className={classes.drawStroke}
+				d="M7 14l5-5 4 3 5-7"
+				pathLength={1}
+			/>
+
+			<path className={classes.stockArrow} d="M16 5h5v5" />
+		</svg>
+	);
+};
+
+export { StocksIcon };

packages/icons/src/svg/WalletIcon.tsx

@@ -0,0 +1,29 @@
+import type { FC } from "react";
+
+import type { IconProps } from "../types";
+
+const WalletIcon: FC<IconProps> = (props) => {
+	const { size = "24", ...svgProps } = props;
+
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			height={size}
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+			viewBox="0 0 24 24"
+			width={size}
+			{...svgProps}
+		>
+			<rect height="15" rx="3" width="18" x="3" y="5" />
+
+			<path d="M3 9h18M7 15h3M14 5V3H7a4 4 0 0 0-4 4" />
+		</svg>
+	);
+};
+
+export { WalletIcon };