feat: add icon set with size variants

Added icons:
- Arrow2Icon
- BinIcon
- BurgerIcon
- CalendarIcon
- CheckIcon
- CloseIcon
- CodeIcon
- CubeIcon
- DownloadIcon
- FilterIcon
- HelpIcon
- HomeIcon
- LinkIcon
- MinusIcon
- MoreIcon
- OverviewIcon
- PlusIcon
- ProfileIcon
- SearchIcon
- SettingsIcon
- ShareIcon
- ShieldIcon
- SortIcon
- StatsIcon
- UploadIcon

Available sizes:
- 16px
- 24px
- 32px

SortIcon variants:
- default
- ascend
- descend

Notes:
- Added a dedicated icon grid preview in the design system page
- Verified consistency across all supported sizes
This commit is contained in:
2026-05-15 20:59:28 +02:00
parent 68641ef5fe
commit 98db7328cb
84 changed files with 845 additions and 7 deletions
@@ -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} />
@@ -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.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="#F4F2EF" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.72905 13.5H11.271" stroke="#F4F2EF" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 504 B

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" 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="#F4F2EF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 19.5H17" stroke="#F4F2EF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 383 B

@@ -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 4.5H19.1111V14.2143H23L16 21.5M16 4.5H12.8889V14.2143H9L16 21.5" fill="#F4F2EF" stroke="#F4F2EF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.5 27.5H22.5" stroke="#F4F2EF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 387 B