From f1d488ae4fd9864cb46b44761477a23749870cb6 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 14 Jul 2026 17:33:55 +0300
Subject: [PATCH] feat(Footer): icon-only CV download below sm

---
 src/shared/assets/icons/FileDownIcon.tsx     | 32 ++++++++++++++++++++
 src/shared/assets/icons/index.ts             |  1 +
 src/widgets/Footer/ui/Footer/Footer.test.tsx |  6 ++++
 src/widgets/Footer/ui/Footer/Footer.tsx      | 13 ++++++--
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/shared/assets/icons/FileDownIcon.tsx

diff --git a/src/shared/assets/icons/FileDownIcon.tsx b/src/shared/assets/icons/FileDownIcon.tsx
new file mode 100644
index 0000000..5319dd7
--- /dev/null
+++ b/src/shared/assets/icons/FileDownIcon.tsx
@@ -0,0 +1,32 @@
+export interface Props {
+  /**
+   * CSS classes on the svg element
+   */
+  className?: string;
+}
+
+/**
+ * File with downward arrow — download icon (Lucide file-down).
+ */
+export function FileDownIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden={true}
+      className={className}
+    >
+      <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+      <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+      <path d="M12 18v-6" />
+      <path d="m9 15 3 3 3-3" />
+    </svg>
+  );
+}
diff --git a/src/shared/assets/icons/index.ts b/src/shared/assets/icons/index.ts
index 21698bf..a720a05 100644
--- a/src/shared/assets/icons/index.ts
+++ b/src/shared/assets/icons/index.ts
@@ -1,2 +1,3 @@
 export { CloseIcon } from './CloseIcon';
+export { FileDownIcon } from './FileDownIcon';
 export { MagnifyIcon } from './MagnifyIcon';
diff --git a/src/widgets/Footer/ui/Footer/Footer.test.tsx b/src/widgets/Footer/ui/Footer/Footer.test.tsx
index 0ea17cb..256ab25 100644
--- a/src/widgets/Footer/ui/Footer/Footer.test.tsx
+++ b/src/widgets/Footer/ui/Footer/Footer.test.tsx
@@ -155,6 +155,12 @@ describe('Footer', () => {
       expect(link).toHaveClass('brutal-border', 'uppercase');
     });
 
+    it('CV link carries the download icon for the narrow-viewport fallback', async () => {
+      render(await Footer());
+      const link = screen.getByRole('link', { name: /download cv/i });
+      expect(link.querySelector('svg')).toBeInTheDocument();
+    });
+
     it('does not render CV link when no cv field', async () => {
       vi.mocked(getFirstRecord).mockResolvedValue({ ...mockSettings, cv: '' });
       render(await Footer());
diff --git a/src/widgets/Footer/ui/Footer/Footer.tsx b/src/widgets/Footer/ui/Footer/Footer.tsx
index c32b790..dde883f 100644
--- a/src/widgets/Footer/ui/Footer/Footer.tsx
+++ b/src/widgets/Footer/ui/Footer/Footer.tsx
@@ -1,5 +1,6 @@
 import type { SiteSettingsRecord } from '$shared/api';
 import { getFirstRecord } from '$shared/api';
+import { FileDownIcon } from '$shared/assets/icons';
 import { buildFileUrl } from '$shared/lib';
 import { Button, InlineSvg, Link } from '$shared/ui';
 
@@ -42,8 +43,16 @@ export async function Footer() {
           ))}
         </div>
         {cvUrl && (
-          <Button href={cvUrl} download size="sm" className="self-start sm:self-auto">
-            Download CV
+          <Button
+            href={cvUrl}
+            download
+            size="sm"
+            aria-label="Download CV"
+            className="inline-flex items-center self-start sm:self-auto"
+          >
+            {/* Icon-only below sm, matching the contact row's icon/label switch */}
+            <FileDownIcon className="w-5 h-5 sm:hidden" />
+            <span className="hidden sm:inline">Download CV</span>
           </Button>
         )}
       </div>