@unkn0wndo3s/nova-design-system 0.1.0

package/src/components/Icons/check/svgs/check-32.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8919 21.3174L26.1416 7.06765C26.4779 6.73137 26.8702 6.56323 27.3186 6.56323C27.767 6.56323 28.1593 6.73137 28.4956 7.06765C28.8319 7.40392 29 7.80353 29 8.26647C29 8.72941 28.8319 9.12846 28.4956 9.46362L13.0689 24.9323C12.7326 25.2686 12.3403 25.4368 11.8919 25.4368C11.4436 25.4368 11.0512 25.2686 10.715 24.9323L3.48501 17.7024C3.14874 17.3661 2.98732 16.9671 3.00078 16.5052C3.01423 16.0434 3.18965 15.6438 3.52705 15.3064C3.86445 14.969 4.26406 14.8009 4.72588 14.802C5.18769 14.8031 5.58674 14.9713 5.92302 15.3064L11.8919 21.3174Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/close/close.astro

@@ -0,0 +1,27 @@
+---
+import close16  from './svgs/close-16.svg?raw';
+import close24  from './svgs/close-24.svg?raw';
+import close32  from './svgs/close-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 = close16;
+else if (size === 24 )  raw = close24;
+else if (size === 32 )  raw = close32;
+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-close', 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} />

package/src/components/Icons/close/svgs/close-16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 3L3 13M13 13L3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/close/svgs/close-24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 3L3 21M21 21L3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/close/svgs/close-32.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M29 3L3 29M29 29L3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/code/code.astro

@@ -0,0 +1,26 @@
+---
+import code16 from './svgs/code-16.svg?raw';
+import code24 from './svgs/code-24.svg?raw';
+import code32 from './svgs/code-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 = code16;
+else if (size === 24) raw = code24;
+else if (size === 32) raw = code32;
+else                  raw = '';
+
+const classes = ['nds-icon-code', 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} />

package/src/components/Icons/code/svgs/code-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="M5.22222 5.77778L3 8L5.22222 10.2222M10.7778 5.77778L13 8L10.7778 10.2222M9.11111 3.55556L6.88889 12.4444" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/code/svgs/code-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="M7 8L3 12L7 16M17 8L21 12L17 16M14 4L10 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/code/svgs/code-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="M8.77778 10.2222L3 16L8.77778 21.7778M23.2222 10.2222L29 16L23.2222 21.7778M18.8889 4.44444L13.1111 27.5556" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/cube/cube.astro

@@ -0,0 +1,26 @@
+---
+import cube16 from './svgs/cube-16.svg?raw';
+import cube24 from './svgs/cube-24.svg?raw';
+import cube32 from './svgs/cube-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 = cube16;
+else if (size === 24) raw = cube24;
+else if (size === 32) raw = cube32;
+else                  raw = '';
+
+const classes = ['nds-icon-cube', 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} />

package/src/components/Icons/cube/svgs/cube-16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.9024 0.210691L14.7691 2.93523C15.1362 3.10556 15.4469 3.37628 15.6649 3.71571C15.8829 4.05515 15.9991 4.44926 16 4.85194V11.1597C15.9991 11.5624 15.8829 11.9565 15.6649 12.2959C15.4469 12.6354 15.1362 12.9061 14.7691 13.0764L8.9024 15.801C8.61985 15.9321 8.31182 16 8 16C7.68818 16 7.38015 15.9321 7.0976 15.801L1.23093 13.0764C0.8638 12.9061 0.553063 12.6354 0.335075 12.2959C0.117087 11.9565 0.000863304 11.5624 0 11.1597V4.85194C0 4.44803 0.1152 4.0526 0.333867 3.707C0.552533 3.3614 0.862933 3.09425 1.23093 2.92356L7.0976 0.19903C7.38015 0.0679377 7.68818 0 8 0C8.31182 0 8.61985 0.0679377 8.9024 0.19903V0.210691ZM1.0624 4.85406V11.1618C1.06243 11.3635 1.12035 11.561 1.22937 11.7312C1.33838 11.9013 1.49397 12.037 1.67787 12.1223L7.4592 14.8044V7.55315L1.08053 4.62719C1.06453 4.70176 1.05666 4.77782 1.05707 4.85406H1.0624ZM14.9291 4.62825L8.5504 7.55421V14.8055L14.3317 12.1234C14.5158 12.038 14.6715 11.9021 14.7805 11.7318C14.8896 11.5615 14.9474 11.3637 14.9472 11.1618V4.85406C14.9472 4.77814 14.939 4.70243 14.9227 4.62825H14.9291ZM7.56907 1.17223L1.87307 3.81195L8.01707 6.6319L14.1611 3.81195L8.46507 1.17223C8.32379 1.10668 8.16978 1.07271 8.01387 1.07271C7.85796 1.07271 7.70394 1.10668 7.56267 1.17223H7.56907Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/cube/svgs/cube-24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3536 0.316037L22.1536 4.40284C22.7043 4.65834 23.1704 5.06442 23.4974 5.57357C23.8244 6.08272 23.9987 6.67389 24 7.27791V16.7396C23.9987 17.3436 23.8244 17.9348 23.4974 18.4439C23.1704 18.9531 22.7043 19.3592 22.1536 19.6147L13.3536 23.7015C12.9298 23.8981 12.4677 24 12 24C11.5323 24 11.0702 23.8981 10.6464 23.7015L1.8464 19.6147C1.2957 19.3592 0.829595 18.9531 0.502613 18.4439C0.175631 17.9348 0.00129496 17.3436 0 16.7396V7.27791C0 6.67205 0.1728 6.07891 0.5008 5.5605C0.8288 5.0421 1.2944 4.64137 1.8464 4.38535L10.6464 0.298544C11.0702 0.101907 11.5323 0 12 0C12.4677 0 12.9298 0.101907 13.3536 0.298544V0.316037ZM1.5936 7.28109V16.7428C1.59364 17.0453 1.68052 17.3416 1.84405 17.5968C2.00757 17.852 2.24096 18.0555 2.5168 18.1835L11.1888 22.2067V11.3297L1.6208 6.94079C1.59679 7.05264 1.58499 7.16673 1.5856 7.28109H1.5936ZM22.3936 6.94238L12.8256 11.3313V22.2083L21.4976 18.1851C21.7737 18.057 22.0072 17.8532 22.1708 17.5977C22.3343 17.3422 22.4211 17.0456 22.4208 16.7428V7.28109C22.4208 7.16721 22.4084 7.05365 22.384 6.94238H22.3936ZM11.3536 1.75834L2.8096 5.71793L12.0256 9.94785L21.2416 5.71793L12.6976 1.75834C12.4857 1.66003 12.2547 1.60907 12.0208 1.60907C11.7869 1.60907 11.5559 1.66003 11.344 1.75834H11.3536Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/cube/svgs/cube-32.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.8048 0.421382L29.5381 5.87045C30.2724 6.21112 30.8939 6.75256 31.3299 7.43143C31.7658 8.1103 31.9983 8.89852 32 9.70388V22.3194C31.9983 23.1248 31.7658 23.913 31.3299 24.5919C30.8939 25.2708 30.2724 25.8122 29.5381 26.1529L17.8048 31.6019C17.2397 31.8641 16.6236 32 16 32C15.3764 32 14.7603 31.8641 14.1952 31.6019L2.46187 26.1529C1.7276 25.8122 1.10613 25.2708 0.670151 24.5919C0.234175 23.913 0.00172661 23.1248 0 22.3194V9.70388C0 8.89606 0.2304 8.10521 0.667733 7.414C1.10507 6.7228 1.72587 6.18849 2.46187 5.84713L14.1952 0.398059C14.7603 0.135875 15.3764 0 16 0C16.6236 0 17.2397 0.135875 17.8048 0.398059V0.421382ZM2.1248 9.70813V22.3237C2.12485 22.7271 2.2407 23.1221 2.45873 23.4624C2.67677 23.8026 2.98794 24.074 3.35573 24.2446L14.9184 29.6089V15.1063L2.16107 9.25439C2.12905 9.40352 2.11332 9.55564 2.11413 9.70813H2.1248ZM29.8581 9.25651L17.1008 15.1084V29.611L28.6635 24.2468C29.0316 24.076 29.343 23.8043 29.561 23.4636C29.7791 23.1229 29.8948 22.7274 29.8944 22.3237V9.70813C29.8944 9.55627 29.8779 9.40487 29.8453 9.25651H29.8581ZM15.1381 2.34446L3.74613 7.62391L16.0341 13.2638L28.3221 7.62391L16.9301 2.34446C16.6476 2.21337 16.3396 2.14543 16.0277 2.14543C15.7159 2.14543 15.4079 2.21337 15.1253 2.34446H15.1381Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/download/download.astro

@@ -0,0 +1,26 @@
+---
+import download16 from './svgs/download-16.svg?raw';
+import download24 from './svgs/download-24.svg?raw';
+import download32 from './svgs/download-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 = download16;
+else if (size === 24) raw = download24;
+else if (size === 32) raw = download32;
+else                  raw = '';
+
+const classes = ['nds-icon-download', 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} />

package/src/components/Icons/download/svgs/download-16.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00001 3H9.67067V8.01199H11.759L8.00001 11.771M8.00001 3H6.32934V8.01199H4.24101L8.00001 11.771" fill="#F4F2EF"/>
+<path d="M8.00001 3H9.67067V8.01199H11.759L8.00001 11.771L4.24101 8.01199H6.32934V3H8.00001Z" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.72905 13.5H11.271" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/download/svgs/download-24.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4.5H13.7778V10.7857H16L12 15.5M12 4.5H10.2222V10.7857H8L12 15.5" fill="#F4F2EF" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 19.5H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/download/svgs/download-32.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4.5H19.1111V14.2143H23L16 21.5M16 4.5H12.8889V14.2143H9L16 21.5" fill="#F4F2EF" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 27.5H22.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/filter/filter.astro

@@ -0,0 +1,26 @@
+---
+import filter16 from './svgs/filter-16.svg?raw';
+import filter24 from './svgs/filter-24.svg?raw';
+import filter32 from './svgs/filter-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 = filter16;
+else if (size === 24) raw = filter24;
+else if (size === 32) raw = filter32;
+else                  raw = '';
+
+const classes = ['nds-icon-filter', 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} />

package/src/components/Icons/filter/svgs/filter-16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 4.66667H13M4.66667 8H11.3333M6.66667 11.3333H9.33333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/filter/svgs/filter-24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H21M6 12H18M9.6 18H14.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/filter/svgs/filter-32.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 7.33333H29M7.33333 16H24.6667M12.5333 24.6667H19.4667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/help/help.astro

@@ -0,0 +1,26 @@
+---
+import help16 from './svgs/help-16.svg?raw';
+import help24 from './svgs/help-24.svg?raw';
+import help32 from './svgs/help-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 = help16;
+else if (size === 24) raw = help24;
+else if (size === 32) raw = help32;
+else                  raw = '';
+
+const classes = ['nds-icon-help', 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} />

package/src/components/Icons/help/svgs/help-16.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13Z" stroke="currentColor"/>
+<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.5"/>
+<path d="M9.5 6.5L11.5 4.5M4.5 11.5L6.5 9.5M6.5 6.5L4.5 4.5M11.5 11.5L9.5 9.5" stroke="currentColor"/>
+</svg>

package/src/components/Icons/help/svgs/help-24.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="1.5"/>
+<path d="M12 15.6C13.9882 15.6 15.6 13.9882 15.6 12C15.6 10.0118 13.9882 8.4 12 8.4C10.0118 8.4 8.39999 10.0118 8.39999 12C8.39999 13.9882 10.0118 15.6 12 15.6Z" stroke="currentColor" stroke-width="1.5"/>
+<path d="M14.7 9.3L18.3 5.7M5.7 18.3L9.3 14.7M9.3 9.3L5.7 5.7M18.3 18.3L14.7 14.7" stroke="currentColor" stroke-width="1.5"/>
+</svg>

package/src/components/Icons/help/svgs/help-32.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29Z" stroke="currentColor" stroke-width="1.5"/>
+<path d="M16 21.2C18.8719 21.2 21.2 18.8719 21.2 16C21.2 13.1281 18.8719 10.8 16 10.8C13.1281 10.8 10.8 13.1281 10.8 16C10.8 18.8719 13.1281 21.2 16 21.2Z" stroke="currentColor" stroke-width="1.5"/>
+<path d="M19.9 12.1L25.1 6.89999M6.89999 25.1L12.1 19.9M12.1 12.1L6.89999 6.89999M25.1 25.1L19.9 19.9" stroke="currentColor" stroke-width="1.5"/>

package/src/components/Icons/home/home.astro

@@ -0,0 +1,26 @@
+---
+import home16 from './svgs/home-16.svg?raw';
+import home24 from './svgs/home-24.svg?raw';
+import home32 from './svgs/home-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 = home16;
+else if (size === 24) raw = home24;
+else if (size === 32) raw = home32;
+else                  raw = '';
+
+const classes = ['nds-icon-home', 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} />

package/src/components/Icons/home/svgs/home-16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.57143 11.8571H6.28572V9C6.28572 8.83809 6.34057 8.70247 6.45029 8.59314C6.56 8.48381 6.69562 8.42895 6.85714 8.42857H9.14286C9.30476 8.42857 9.44057 8.48343 9.55029 8.59314C9.66 8.70286 9.71467 8.83847 9.71429 9V11.8571H11.4286V6.71428L8 4.14286L4.57143 6.71428V11.8571ZM3.42857 11.8571V6.71428C3.42857 6.53333 3.46914 6.3619 3.55029 6.2C3.63143 6.03809 3.74324 5.90476 3.88572 5.8L7.31429 3.22857C7.51429 3.07619 7.74286 3 8 3C8.25714 3 8.48572 3.07619 8.68572 3.22857L12.1143 5.8C12.2571 5.90476 12.3691 6.03809 12.4503 6.2C12.5314 6.3619 12.5718 6.53333 12.5714 6.71428V11.8571C12.5714 12.1714 12.4594 12.4406 12.2354 12.6646C12.0114 12.8886 11.7425 13.0004 11.4286 13H9.14286C8.98095 13 8.84533 12.9451 8.736 12.8354C8.62667 12.7257 8.57181 12.5901 8.57143 12.4286V9.57143H7.42857V12.4286C7.42857 12.5905 7.37372 12.7263 7.264 12.836C7.15429 12.9457 7.01867 13.0004 6.85714 13H4.57143C4.25714 13 3.98819 12.8882 3.76457 12.6646C3.54095 12.4409 3.42895 12.1718 3.42857 11.8571Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/home/svgs/home-24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.82857 18.9429H8.91428V13.8C8.91428 13.5086 9.01302 13.2645 9.21051 13.0677C9.40799 12.8709 9.65211 12.7721 9.94285 12.7714H14.0571C14.3486 12.7714 14.593 12.8702 14.7905 13.0677C14.988 13.2651 15.0864 13.5093 15.0857 13.8V18.9429H18.1714V9.68571L12 5.05714L5.82857 9.68571V18.9429ZM3.77142 18.9429V9.68571C3.77142 9.36 3.84445 9.05143 3.99051 8.76C4.13657 8.46857 4.33782 8.22857 4.59428 8.04L10.7657 3.41143C11.1257 3.13714 11.5371 3 12 3C12.4629 3 12.8743 3.13714 13.2343 3.41143L19.4057 8.04C19.6629 8.22857 19.8644 8.46857 20.0105 8.76C20.1566 9.05143 20.2292 9.36 20.2286 9.68571V18.9429C20.2286 19.5086 20.027 19.993 19.6238 20.3962C19.2206 20.7994 18.7364 21.0007 18.1714 21H14.0571C13.7657 21 13.5216 20.9013 13.3248 20.7038C13.128 20.5063 13.0293 20.2622 13.0286 19.9714V14.8286H10.9714V19.9714C10.9714 20.2629 10.8727 20.5073 10.6752 20.7048C10.4777 20.9023 10.2336 21.0007 9.94285 21H5.82857C5.26285 21 4.77874 20.7987 4.37622 20.3962C3.97371 19.9937 3.77211 19.5093 3.77142 18.9429Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/home/svgs/home-32.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08572 26.0286H11.5429V18.6C11.5429 18.179 11.6855 17.8264 11.9707 17.5422C12.256 17.2579 12.6086 17.1153 13.0286 17.1143H18.9714C19.3924 17.1143 19.7455 17.2569 20.0307 17.5422C20.316 17.8274 20.4581 18.18 20.4571 18.6V26.0286H24.9143V12.6571L16 5.97143L7.08572 12.6571V26.0286ZM4.11429 26.0286V12.6571C4.11429 12.1867 4.21977 11.741 4.43075 11.32C4.64172 10.899 4.93242 10.5524 5.30286 10.28L14.2171 3.59429C14.7371 3.1981 15.3314 3 16 3C16.6686 3 17.2629 3.1981 17.7829 3.59429L26.6971 10.28C27.0686 10.5524 27.3598 10.899 27.5707 11.32C27.7817 11.741 27.8867 12.1867 27.8857 12.6571V26.0286C27.8857 26.8457 27.5945 27.5455 27.0121 28.1279C26.4297 28.7103 25.7304 29.001 24.9143 29H18.9714C18.5505 29 18.1979 28.8574 17.9136 28.5721C17.6293 28.2869 17.4867 27.9342 17.4857 27.5143V20.0857H14.5143V27.5143C14.5143 27.9352 14.3717 28.2883 14.0864 28.5736C13.8011 28.8589 13.4485 29.001 13.0286 29H7.08572C6.26857 29 5.5693 28.7093 4.98789 28.1279C4.40648 27.5465 4.11528 26.8467 4.11429 26.0286Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/index.ts

@@ -0,0 +1,25 @@
+export { default as Arrow2Icon }   from './Arrow2/Arrow2.astro';
+export { default as BinIcon }      from './bin/bin.astro';
+export { default as BurgerIcon }   from './burger/burger.astro';
+export { default as CalendarIcon } from './calendar/calendar.astro';
+export { default as CheckIcon }    from './check/check.astro';
+export { default as CloseIcon }    from './close/close.astro';
+export { default as CodeIcon }     from './code/code.astro';
+export { default as CubeIcon }     from './cube/cube.astro';
+export { default as DownloadIcon } from './download/download.astro';
+export { default as FilterIcon }   from './filter/filter.astro';
+export { default as HelpIcon }     from './help/help.astro';
+export { default as HomeIcon }     from './home/home.astro';
+export { default as LinkIcon }     from './link/link.astro';
+export { default as MinusIcon }    from './minus/minus.astro';
+export { default as MoreIcon }     from './more/more.astro';
+export { default as OverviewIcon } from './overview/overview.astro';
+export { default as PlusIcon }     from './plus/plus.astro';
+export { default as ProfileIcon }  from './profile/profile.astro';
+export { default as SearchIcon }   from './search/search.astro';
+export { default as SettingsIcon } from './settings/settings.astro';
+export { default as ShareIcon }    from './share/share.astro';
+export { default as ShieldIcon }   from './shield/shield.astro';
+export { default as SortIcon }     from './sort/sort.astro';
+export { default as StatsIcon }    from './stats/stats.astro';
+export { default as UploadIcon }   from './upload/upload.astro';

package/src/components/Icons/link/link.astro

@@ -0,0 +1,26 @@
+---
+import link16 from './svgs/link-16.svg?raw';
+import link24 from './svgs/link-24.svg?raw';
+import link32 from './svgs/link-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 = link16;
+else if (size === 24) raw = link24;
+else if (size === 32) raw = link32;
+else                  raw = '';
+
+const classes = ['nds-icon-link', 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} />

package/src/components/Icons/link/svgs/link-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="M8.57143 4.57143L9.71429 3.42857C10.2857 2.85714 11.4286 2.85714 12 3.42857L12.5714 4C13.1429 4.57143 13.1429 5.71429 12.5714 6.28571L9.71429 9.14286C9.14286 9.71429 8 9.71429 7.42857 9.14286M7.42857 11.4286L6.28571 12.5714C5.71429 13.1429 4.57143 13.1429 4 12.5714L3.42857 12C2.85714 11.4286 2.85714 10.2857 3.42857 9.71429L6.28571 6.85714C6.85714 6.28571 8 6.28571 8.57143 6.85714" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/link/svgs/link-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="M13.0286 5.82857L15.0857 3.77143C16.1143 2.74286 18.1714 2.74286 19.2 3.77143L20.2286 4.8C21.2571 5.82857 21.2571 7.88571 20.2286 8.91429L15.0857 14.0571C14.0571 15.0857 12 15.0857 10.9714 14.0571M10.9714 18.1714L8.91429 20.2286C7.88571 21.2571 5.82857 21.2571 4.8 20.2286L3.77143 19.2C2.74286 18.1714 2.74286 16.1143 3.77143 15.0857L8.91429 9.94286C9.94286 8.91429 12 8.91429 13.0286 9.94286" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/link/svgs/link-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="M17.4857 7.08571L20.4571 4.11429C21.9429 2.62857 24.9143 2.62857 26.4 4.11429L27.8857 5.6C29.3714 7.08571 29.3714 10.0571 27.8857 11.5429L20.4571 18.9714C18.9714 20.4571 16 20.4571 14.5143 18.9714M14.5143 24.9143L11.5429 27.8857C10.0571 29.3714 7.08571 29.3714 5.6 27.8857L4.11429 26.4C2.62857 24.9143 2.62857 21.9429 4.11429 20.4571L11.5429 13.0286C13.0286 11.5429 16 11.5429 17.4857 13.0286" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/minus/minus.astro

@@ -0,0 +1,26 @@
+---
+import minus16 from './svgs/minus-16.svg?raw';
+import minus24 from './svgs/minus-24.svg?raw';
+import minus32 from './svgs/minus-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 = minus16;
+else if (size === 24) raw = minus24;
+else if (size === 32) raw = minus32;
+else                  raw = '';
+
+const classes = ['nds-icon-minus', 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} />

package/src/components/Icons/minus/svgs/minus-16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/minus/svgs/minus-24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/minus/svgs/minus-32.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 16H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/Icons/more/more.astro

@@ -0,0 +1,26 @@
+---
+import more16 from './svgs/more-16.svg?raw';
+import more24 from './svgs/more-24.svg?raw';
+import more32 from './svgs/more-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 = more16;
+else if (size === 24) raw = more24;
+else if (size === 32) raw = more32;
+else                  raw = '';
+
+const classes = ['nds-icon-more', 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} />

package/src/components/Icons/more/svgs/more-16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="3" viewBox="0 0 16 3" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33333 0C0.6 0 0 0.675 0 1.5C0 2.325 0.6 3 1.33333 3C2.06667 3 2.66667 2.325 2.66667 1.5C2.66667 0.675 2.06667 0 1.33333 0ZM14.6667 0C13.9333 0 13.3333 0.675 13.3333 1.5C13.3333 2.325 13.9333 3 14.6667 3C15.4 3 16 2.325 16 1.5C16 0.675 15.4 0 14.6667 0ZM8 0C7.26667 0 6.66667 0.675 6.66667 1.5C6.66667 2.325 7.26667 3 8 3C8.73333 3 9.33333 2.325 9.33333 1.5C9.33333 0.675 8.73333 0 8 0Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/more/svgs/more-24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="4" viewBox="0 0 24 4" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM22 0C20.9 0 20 0.9 20 2C20 3.1 20.9 4 22 4C23.1 4 24 3.1 24 2C24 0.9 23.1 0 22 0ZM12 0C10.9 0 10 0.9 10 2C10 3.1 10.9 4 12 4C13.1 4 14 3.1 14 2C14 0.9 13.1 0 12 0Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/more/svgs/more-32.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="5" viewBox="0 0 32 5" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.66667 0C1.2 0 0 1.125 0 2.5C0 3.875 1.2 5 2.66667 5C4.13333 5 5.33333 3.875 5.33333 2.5C5.33333 1.125 4.13333 0 2.66667 0ZM29.3333 0C27.8667 0 26.6667 1.125 26.6667 2.5C26.6667 3.875 27.8667 5 29.3333 5C30.8 5 32 3.875 32 2.5C32 1.125 30.8 0 29.3333 0ZM16 0C14.5333 0 13.3333 1.125 13.3333 2.5C13.3333 3.875 14.5333 5 16 5C17.4667 5 18.6667 3.875 18.6667 2.5C18.6667 1.125 17.4667 0 16 0Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/overview/overview.astro

@@ -0,0 +1,26 @@
+---
+import overview16 from './svgs/overview-16.svg?raw';
+import overview24 from './svgs/overview-24.svg?raw';
+import overview32 from './svgs/overview-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 = overview16;
+else if (size === 24) raw = overview24;
+else if (size === 32) raw = overview32;
+else                  raw = '';
+
+const classes = ['nds-icon-overview', 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} />

package/src/components/Icons/overview/svgs/overview-16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.55556 6.33333V3H13V6.33333H8.55556ZM3 8.55556V3H7.44444V8.55556H3ZM8.55556 13V7.44444H13V13H8.55556ZM3 13V9.66667H7.44444V13H3Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/overview/svgs/overview-24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 9V3H21V9H13ZM3 13V3H11V13H3ZM13 21V11H21V21H13ZM3 21V15H11V21H3Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/overview/svgs/overview-32.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4444 11.8333V3.5H29V11.8333H17.4444ZM3 17.3889V3.5H14.5556V17.3889H3ZM17.4444 28.5V14.6111H29V28.5H17.4444ZM3 28.5V20.1667H14.5556V28.5H3Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/plus/plus.astro

@@ -0,0 +1,26 @@
+---
+import plus16 from './svgs/plus-16.svg?raw';
+import plus24 from './svgs/plus-24.svg?raw';
+import plus32 from './svgs/plus-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 = plus16;
+else if (size === 24) raw = plus24;
+else if (size === 32) raw = plus32;
+else                  raw = '';
+
+const classes = ['nds-icon-plus', 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} />

package/src/components/Icons/plus/svgs/plus-16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.375 7.375H8.625V3.625C8.625 3.45924 8.55915 3.30027 8.44194 3.18306C8.32473 3.06585 8.16576 3 8 3C7.83424 3 7.67527 3.06585 7.55806 3.18306C7.44085 3.30027 7.375 3.45924 7.375 3.625V7.375H3.625C3.45924 7.375 3.30027 7.44085 3.18306 7.55806C3.06585 7.67527 3 7.83424 3 8C3 8.16576 3.06585 8.32473 3.18306 8.44194C3.30027 8.55915 3.45924 8.625 3.625 8.625H7.375V12.375C7.375 12.5408 7.44085 12.6997 7.55806 12.8169C7.67527 12.9342 7.83424 13 8 13C8.16576 13 8.32473 12.9342 8.44194 12.8169C8.55915 12.6997 8.625 12.5408 8.625 12.375V8.625H12.375C12.5408 8.625 12.6997 8.55915 12.8169 8.44194C12.9342 8.32473 13 8.16576 13 8C13 7.83424 12.9342 7.67527 12.8169 7.55806C12.6997 7.44085 12.5408 7.375 12.375 7.375Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/plus/svgs/plus-24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.875 10.875H13.125V4.125C13.125 3.82663 13.0065 3.54048 12.7955 3.32951C12.5845 3.11853 12.2984 3 12 3C11.7016 3 11.4155 3.11853 11.2045 3.32951C10.9935 3.54048 10.875 3.82663 10.875 4.125V10.875H4.125C3.82663 10.875 3.54048 10.9935 3.32951 11.2045C3.11853 11.4155 3 11.7016 3 12C3 12.2984 3.11853 12.5845 3.32951 12.7955C3.54048 13.0065 3.82663 13.125 4.125 13.125H10.875V19.875C10.875 20.1734 10.9935 20.4595 11.2045 20.6705C11.4155 20.8815 11.7016 21 12 21C12.2984 21 12.5845 20.8815 12.7955 20.6705C13.0065 20.4595 13.125 20.1734 13.125 19.875V13.125H19.875C20.1734 13.125 20.4595 13.0065 20.6705 12.7955C20.8815 12.5845 21 12.2984 21 12C21 11.7016 20.8815 11.4155 20.6705 11.2045C20.4595 10.9935 20.1734 10.875 19.875 10.875Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/plus/svgs/plus-32.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.375 14.375H17.625V4.625C17.625 4.19402 17.4538 3.7807 17.149 3.47595C16.8443 3.17121 16.431 3 16 3C15.569 3 15.1557 3.17121 14.851 3.47595C14.5462 3.7807 14.375 4.19402 14.375 4.625V14.375H4.625C4.19402 14.375 3.7807 14.5462 3.47595 14.851C3.17121 15.1557 3 15.569 3 16C3 16.431 3.17121 16.8443 3.47595 17.149C3.7807 17.4538 4.19402 17.625 4.625 17.625H14.375V27.375C14.375 27.806 14.5462 28.2193 14.851 28.524C15.1557 28.8288 15.569 29 16 29C16.431 29 16.8443 28.8288 17.149 28.524C17.4538 28.2193 17.625 27.806 17.625 27.375V17.625H27.375C27.806 17.625 28.2193 17.4538 28.524 17.149C28.8288 16.8443 29 16.431 29 16C29 15.569 28.8288 15.1557 28.524 14.851C28.2193 14.5462 27.806 14.375 27.375 14.375Z" fill="#F4F2EF"/>
+</svg>

package/src/components/Icons/profile/profile.astro

@@ -0,0 +1,27 @@
+---
+import profile16  from './svgs/profile-16.svg?raw';
+import profile24  from './svgs/profile-24.svg?raw';
+import profile32  from './svgs/profile-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 = profile16;
+else if (size === 24 )  raw = profile24;
+else if (size === 32 )  raw = profile32;
+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-profile', 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} />