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
+108 -1
View File
@@ -1,6 +1,12 @@
---
import Layout from '../layouts/Layout.astro';
import { Arrow2Icon, ProfileIcon, ShareIcon, SearchIcon, CloseIcon, UploadIcon } from '../components/Icons/index.ts';
import {
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,
} from '../components/Icons/index.ts';
---
<Layout>
@@ -52,6 +58,107 @@ import { Arrow2Icon, ProfileIcon, ShareIcon, SearchIcon, CloseIcon, UploadIcon }
<UploadIcon size={24} />
<UploadIcon size={32} />
</div>
<div class="icon-row">
<BinIcon size={16} />
<BinIcon size={24} />
<BinIcon size={32} />
</div>
<div class="icon-row">
<BurgerIcon size={16} />
<BurgerIcon size={24} />
<BurgerIcon size={32} />
</div>
<div class="icon-row">
<CalendarIcon size={16} />
<CalendarIcon size={24} />
<CalendarIcon size={32} />
</div>
<div class="icon-row">
<CheckIcon size={16} />
<CheckIcon size={24} />
<CheckIcon size={32} />
</div>
<div class="icon-row">
<CodeIcon size={16} />
<CodeIcon size={24} />
<CodeIcon size={32} />
</div>
<div class="icon-row">
<CubeIcon size={16} />
<CubeIcon size={24} />
<CubeIcon size={32} />
</div>
<div class="icon-row">
<DownloadIcon size={16} />
<DownloadIcon size={24} />
<DownloadIcon size={32} />
</div>
<div class="icon-row">
<FilterIcon size={16} />
<FilterIcon size={24} />
<FilterIcon size={32} />
</div>
<div class="icon-row">
<HelpIcon size={16} />
<HelpIcon size={24} />
<HelpIcon size={32} />
</div>
<div class="icon-row">
<HomeIcon size={16} />
<HomeIcon size={24} />
<HomeIcon size={32} />
</div>
<div class="icon-row">
<LinkIcon size={16} />
<LinkIcon size={24} />
<LinkIcon size={32} />
</div>
<div class="icon-row">
<MinusIcon size={16} />
<MinusIcon size={24} />
<MinusIcon size={32} />
</div>
<div class="icon-row">
<MoreIcon size={16} />
<MoreIcon size={24} />
<MoreIcon size={32} />
</div>
<div class="icon-row">
<OverviewIcon size={16} />
<OverviewIcon size={24} />
<OverviewIcon size={32} />
</div>
<div class="icon-row">
<PlusIcon size={16} />
<PlusIcon size={24} />
<PlusIcon size={32} />
</div>
<div class="icon-row">
<SettingsIcon size={16} />
<SettingsIcon size={24} />
<SettingsIcon size={32} />
</div>
<div class="icon-row">
<ShieldIcon size={16} />
<ShieldIcon size={24} />
<ShieldIcon size={32} />
</div>
<div class="icon-row">
<SortIcon size={16} variant="default" />
<SortIcon size={16} variant="ascend" />
<SortIcon size={16} variant="descend" />
<SortIcon size={24} variant="default" />
<SortIcon size={24} variant="ascend" />
<SortIcon size={24} variant="descend" />
<SortIcon size={32} variant="default" />
<SortIcon size={32} variant="ascend" />
<SortIcon size={32} variant="descend" />
</div>
<div class="icon-row">
<StatsIcon size={16} />
<StatsIcon size={24} />
<StatsIcon size={32} />
</div>
</div>
</section>
</main>