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
+26
View File
@@ -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} />
@@ -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="#F4F2EF"/>
<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="#F4F2EF" 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="#F4F2EF"/>
</svg>

After

Width:  |  Height:  |  Size: 496 B

@@ -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="#F4F2EF" 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="#F4F2EF" 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="#F4F2EF" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 586 B

@@ -0,0 +1,5 @@
<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="#F4F2EF" 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="#F4F2EF" 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="#F4F2EF" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 596 B