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:
+108
-1
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user