From 678ce7f36fe729966b47dd17cf064e702faa1abe Mon Sep 17 00:00:00 2001
From: P2Wdisabled <louis1.potevin1@gmail.com>
Date: Fri, 15 May 2026 18:44:25 +0200
Subject: [PATCH] feat: add Share icon with multiple sizes (16, 24, 32) and
 update index export

---
 src/components/Icons/index.ts                |  3 ++-
 src/components/Icons/share/share.astro       | 27 ++++++++++++++++++++
 src/components/Icons/share/svgs/share-16.svg |  3 +++
 src/components/Icons/share/svgs/share-24.svg |  3 +++
 src/components/Icons/share/svgs/share-32.svg |  3 +++
 src/pages/index.astro                        |  6 ++++-
 6 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Icons/share/share.astro
 create mode 100644 src/components/Icons/share/svgs/share-16.svg
 create mode 100644 src/components/Icons/share/svgs/share-24.svg
 create mode 100644 src/components/Icons/share/svgs/share-32.svg

diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
index c083b12..eef2faf 100644
--- a/src/components/Icons/index.ts
+++ b/src/components/Icons/index.ts
@@ -1,2 +1,3 @@
 export { default as Arrow2 } from './Arrow2/Arrow2.astro';
-export { default as Profile } from './profile/profile.astro';
\ No newline at end of file
+export { default as Profile } from './profile/profile.astro';
+export { default as Share } from './share/share.astro';
\ No newline at end of file
diff --git a/src/components/Icons/share/share.astro b/src/components/Icons/share/share.astro
new file mode 100644
index 0000000..974a5da
--- /dev/null
+++ b/src/components/Icons/share/share.astro
@@ -0,0 +1,27 @@
+---
+import share16  from './svgs/share-16.svg?raw';
+import share24  from './svgs/share-24.svg?raw';
+import share32  from './svgs/share-32.svg?raw';
+
+export interface Props {
+  size:        16 | 24 | 32;
+  label?:       string;
+  class?:       string;
+}
+
+const { size = 24, label, class: className } = Astro.props;
+
+let raw: string;
+if      (size === 16 )  raw = share16;
+else if (size === 24 )  raw = share24;
+else if (size === 32 )  raw = share32;
+else                   raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
+
+
+const classes = ['nds-icon-share', className].filter(Boolean).join(' ');
+const svg = raw
+  .replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
+  .replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
+---
+
+<Fragment set:html={svg} />
diff --git a/src/components/Icons/share/svgs/share-16.svg b/src/components/Icons/share/svgs/share-16.svg
new file mode 100644
index 0000000..e93d682
--- /dev/null
+++ b/src/components/Icons/share/svgs/share-16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 13C10.5833 13 10.2292 12.8542 9.9375 12.5625C9.64583 12.2708 9.5 11.9167 9.5 11.5C9.5 11.45 9.5125 11.3333 9.5375 11.15L6.025 9.1C5.89167 9.225 5.7375 9.323 5.5625 9.394C5.3875 9.465 5.2 9.50033 5 9.5C4.58333 9.5 4.22917 9.35417 3.9375 9.0625C3.64583 8.77083 3.5 8.41667 3.5 8C3.5 7.58333 3.64583 7.22917 3.9375 6.9375C4.22917 6.64583 4.58333 6.5 5 6.5C5.2 6.5 5.3875 6.5355 5.5625 6.6065C5.7375 6.6775 5.89167 6.77533 6.025 6.9L9.5375 4.85C9.52083 4.79167 9.5105 4.7355 9.5065 4.6815C9.5025 4.6275 9.50033 4.567 9.5 4.5C9.5 4.08333 9.64583 3.72917 9.9375 3.4375C10.2292 3.14583 10.5833 3 11 3C11.4167 3 11.7708 3.14583 12.0625 3.4375C12.3542 3.72917 12.5 4.08333 12.5 4.5C12.5 4.91667 12.3542 5.27083 12.0625 5.5625C11.7708 5.85417 11.4167 6 11 6C10.8 6 10.6125 5.9645 10.4375 5.8935C10.2625 5.8225 10.1083 5.72467 9.975 5.6L6.4625 7.65C6.47917 7.70833 6.48967 7.76467 6.494 7.819C6.49833 7.87333 6.50033 7.93367 6.5 8C6.49967 8.06633 6.49767 8.12683 6.494 8.1815C6.49033 8.23617 6.47983 8.29233 6.4625 8.35L9.975 10.4C10.1083 10.275 10.2625 10.1772 10.4375 10.1065C10.6125 10.0358 10.8 10.0003 11 10C11.4167 10 11.7708 10.1458 12.0625 10.4375C12.3542 10.7292 12.5 11.0833 12.5 11.5C12.5 11.9167 12.3542 12.2708 12.0625 12.5625C11.7708 12.8542 11.4167 13 11 13Z" fill="#F4F2EF"/>
+</svg>
diff --git a/src/components/Icons/share/svgs/share-24.svg b/src/components/Icons/share/svgs/share-24.svg
new file mode 100644
index 0000000..f4c945d
--- /dev/null
+++ b/src/components/Icons/share/svgs/share-24.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4 21C16.65 21 16.0125 20.7375 15.4875 20.2125C14.9625 19.6875 14.7 19.05 14.7 18.3C14.7 18.21 14.7225 18 14.7675 17.67L8.445 13.98C8.205 14.205 7.9275 14.3814 7.6125 14.5092C7.2975 14.637 6.96 14.7006 6.6 14.7C5.85 14.7 5.2125 14.4375 4.6875 13.9125C4.1625 13.3875 3.9 12.75 3.9 12C3.9 11.25 4.1625 10.6125 4.6875 10.0875C5.2125 9.5625 5.85 9.3 6.6 9.3C6.96 9.3 7.2975 9.3639 7.6125 9.4917C7.9275 9.6195 8.205 9.7956 8.445 10.02L14.7675 6.33C14.7375 6.225 14.7189 6.1239 14.7117 6.0267C14.7045 5.9295 14.7006 5.8206 14.7 5.7C14.7 4.95 14.9625 4.3125 15.4875 3.7875C16.0125 3.2625 16.65 3 17.4 3C18.15 3 18.7875 3.2625 19.3125 3.7875C19.8375 4.3125 20.1 4.95 20.1 5.7C20.1 6.45 19.8375 7.0875 19.3125 7.6125C18.7875 8.1375 18.15 8.4 17.4 8.4C17.04 8.4 16.7025 8.3361 16.3875 8.2083C16.0725 8.0805 15.795 7.9044 15.555 7.68L9.2325 11.37C9.2625 11.475 9.2814 11.5764 9.2892 11.6742C9.297 11.772 9.3006 11.8806 9.3 12C9.2994 12.1194 9.2958 12.2283 9.2892 12.3267C9.2826 12.4251 9.2637 12.5262 9.2325 12.63L15.555 16.32C15.795 16.095 16.0725 15.9189 16.3875 15.7917C16.7025 15.6645 17.04 15.6006 17.4 15.6C18.15 15.6 18.7875 15.8625 19.3125 16.3875C19.8375 16.9125 20.1 17.55 20.1 18.3C20.1 19.05 19.8375 19.6875 19.3125 20.2125C18.7875 20.7375 18.15 21 17.4 21Z" fill="#F4F2EF"/>
+</svg>
diff --git a/src/components/Icons/share/svgs/share-32.svg b/src/components/Icons/share/svgs/share-32.svg
new file mode 100644
index 0000000..f5b0c31
--- /dev/null
+++ b/src/components/Icons/share/svgs/share-32.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.8 29C22.7167 29 21.7958 28.6208 21.0375 27.8625C20.2792 27.1042 19.9 26.1833 19.9 25.1C19.9 24.97 19.9325 24.6667 19.9975 24.19L10.865 18.86C10.5183 19.185 10.1175 19.4398 9.6625 19.6244C9.2075 19.809 8.72 19.9009 8.2 19.9C7.11667 19.9 6.19583 19.5208 5.4375 18.7625C4.67917 18.0042 4.3 17.0833 4.3 16C4.3 14.9167 4.67917 13.9958 5.4375 13.2375C6.19583 12.4792 7.11667 12.1 8.2 12.1C8.72 12.1 9.2075 12.1923 9.6625 12.3769C10.1175 12.5615 10.5183 12.8159 10.865 13.14L19.9975 7.81C19.9542 7.65833 19.9273 7.5123 19.9169 7.3719C19.9065 7.2315 19.9009 7.0742 19.9 6.9C19.9 5.81667 20.2792 4.89583 21.0375 4.1375C21.7958 3.37917 22.7167 3 23.8 3C24.8833 3 25.8042 3.37917 26.5625 4.1375C27.3208 4.89583 27.7 5.81667 27.7 6.9C27.7 7.98333 27.3208 8.90417 26.5625 9.6625C25.8042 10.4208 24.8833 10.8 23.8 10.8C23.28 10.8 22.7925 10.7077 22.3375 10.5231C21.8825 10.3385 21.4817 10.0841 21.135 9.76L12.0025 15.09C12.0458 15.2417 12.0731 15.3881 12.0844 15.5294C12.0957 15.6707 12.1009 15.8275 12.1 16C12.0991 16.1725 12.0939 16.3298 12.0844 16.4719C12.0749 16.614 12.0476 16.7601 12.0025 16.91L21.135 22.24C21.4817 21.915 21.8825 21.6606 22.3375 21.4769C22.7925 21.2932 23.28 21.2009 23.8 21.2C24.8833 21.2 25.8042 21.5792 26.5625 22.3375C27.3208 23.0958 27.7 24.0167 27.7 25.1C27.7 26.1833 27.3208 27.1042 26.5625 27.8625C25.8042 28.6208 24.8833 29 23.8 29Z" fill="#F4F2EF"/>
+</svg>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bc31e58..57300c8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import { Arrow2, Profile } from '../components/Icons/index.ts';
+import { Arrow2, Profile, Share } from '../components/Icons/index.ts';
 ---
 
 <Layout>
@@ -32,6 +32,10 @@ import { Arrow2, Profile } from '../components/Icons/index.ts';
           <Profile size={24} />
           <Profile size={32} />
         </div>
+        <div class="icon-row">
+          <Share size={16} />
+          <Share size={24} />
+          <Share size={32} />
       </div>
     </section>
   </main>