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 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} />
@@ -0,0 +1,3 @@
<svg width="16" height="3" viewBox="0 0 16 3" fill="none" 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>

After

Width:  |  Height:  |  Size: 517 B

@@ -0,0 +1,3 @@
<svg width="24" height="4" viewBox="0 0 24 4" fill="none" 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>

After

Width:  |  Height:  |  Size: 362 B

@@ -0,0 +1,3 @@
<svg width="32" height="5" viewBox="0 0 32 5" fill="none" 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>

After

Width:  |  Height:  |  Size: 520 B