feat: add Arrow2 and Profile icons with multiple sizes and orientations

- Introduced new SVG icons for Arrow2 in sizes 16, 24, and 32 with orientations: up, down, left, and right.
- Added Profile icon in sizes 16, 24, and 32.
- Created a new index file for icons to facilitate easier imports.
- Updated the main page to showcase the new icons in a grid layout.
- Added global styles for the design system, including typography and spacing tokens.
- Updated layout styles for better visual consistency.
This commit is contained in:
2026-05-15 18:38:11 +02:00
parent 35b9ca30cd
commit 5323483d65
23 changed files with 317 additions and 8 deletions
@@ -0,0 +1,28 @@
---
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;
orientation?: 'up' | 'down' | 'left' | 'right';
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} />
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.77778 5.22222C5.77778 4.63285 6.0119 4.06762 6.42865 3.65087C6.8454 3.23413 7.41063 3 8 3C8.58937 3 9.1546 3.23413 9.57135 3.65087C9.9881 4.06762 10.2222 4.63285 10.2222 5.22222C10.2222 5.81159 9.9881 6.37682 9.57135 6.79357C9.1546 7.21032 8.58937 7.44444 8 7.44444C7.41063 7.44444 6.8454 7.21032 6.42865 6.79357C6.0119 6.37682 5.77778 5.81159 5.77778 5.22222ZM5.77778 8.55556C5.04107 8.55556 4.33453 8.84821 3.81359 9.36915C3.29266 9.89008 3 10.5966 3 11.3333C3 11.7754 3.17559 12.1993 3.48816 12.5118C3.80072 12.8244 4.22464 13 4.66667 13H11.3333C11.7754 13 12.1993 12.8244 12.5118 12.5118C12.8244 12.1993 13 11.7754 13 11.3333C13 10.5966 12.7073 9.89008 12.1864 9.36915C11.6655 8.84821 10.9589 8.55556 10.2222 8.55556H5.77778Z" fill="#F4F2EF"/>
</svg>

After

Width:  |  Height:  |  Size: 903 B

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.27778C8 6.27585 8.42143 5.31496 9.17157 4.60649C9.92172 3.89801 10.9391 3.5 12 3.5C13.0609 3.5 14.0783 3.89801 14.8284 4.60649C15.5786 5.31496 16 6.27585 16 7.27778C16 8.27971 15.5786 9.2406 14.8284 9.94907C14.0783 10.6575 13.0609 11.0556 12 11.0556C10.9391 11.0556 9.92172 10.6575 9.17157 9.94907C8.42143 9.2406 8 8.27971 8 7.27778ZM8 12.9444C6.67392 12.9444 5.40215 13.442 4.46447 14.3276C3.52678 15.2131 3 16.4143 3 17.6667C3 18.4181 3.31607 19.1388 3.87868 19.6701C4.44129 20.2015 5.20435 20.5 6 20.5H18C18.7956 20.5 19.5587 20.2015 20.1213 19.6701C20.6839 19.1388 21 18.4181 21 17.6667C21 16.4143 20.4732 15.2131 19.5355 14.3276C18.5979 13.442 17.3261 12.9444 16 12.9444H8Z" fill="#F4F2EF"/>
</svg>

After

Width:  |  Height:  |  Size: 854 B

@@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2222 8.77778C10.2222 7.24542 10.831 5.77582 11.9145 4.69227C12.998 3.60873 14.4676 3 16 3C17.5324 3 19.002 3.60873 20.0855 4.69227C21.1691 5.77582 21.7778 7.24542 21.7778 8.77778C21.7778 10.3101 21.1691 11.7797 20.0855 12.8633C19.002 13.9468 17.5324 14.5556 16 14.5556C14.4676 14.5556 12.998 13.9468 11.9145 12.8633C10.831 11.7797 10.2222 10.3101 10.2222 8.77778ZM10.2222 17.4444C8.30677 17.4444 6.46977 18.2054 5.11534 19.5598C3.76091 20.9142 3 22.7512 3 24.6667C3 25.8159 3.45655 26.9181 4.2692 27.7308C5.08186 28.5435 6.18406 29 7.33333 29H24.6667C25.8159 29 26.9181 28.5435 27.7308 27.7308C28.5435 26.9181 29 25.8159 29 24.6667C29 22.7512 28.2391 20.9142 26.8847 19.5598C25.5302 18.2054 23.6932 17.4444 21.7778 17.4444H10.2222Z" fill="#F4F2EF"/>
</svg>

After

Width:  |  Height:  |  Size: 906 B