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:
@@ -0,0 +1,26 @@
|
||||
---
|
||||
import check16 from './svgs/check-16.svg?raw';
|
||||
import check24 from './svgs/check-24.svg?raw';
|
||||
import check32 from './svgs/check-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 = check16;
|
||||
else if (size === 24) raw = check24;
|
||||
else if (size === 32) raw = check32;
|
||||
else raw = '';
|
||||
|
||||
const classes = ['nds-icon-check', 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="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.41997 10.0451L11.9006 4.56449C12.03 4.43515 12.1809 4.37048 12.3533 4.37048C12.5258 4.37048 12.6767 4.43515 12.806 4.56449C12.9353 4.69383 13 4.84752 13 5.02558C13 5.20363 12.9353 5.35711 12.806 5.48602L6.87265 11.4355C6.74332 11.5649 6.59242 11.6295 6.41997 11.6295C6.24752 11.6295 6.09663 11.5649 5.96729 11.4355L3.18654 8.65478C3.05721 8.52544 2.99512 8.37196 3.0003 8.19434C3.00547 8.01671 3.07294 7.86302 3.20271 7.73325C3.33248 7.60348 3.48618 7.53881 3.6638 7.53924C3.84142 7.53967 3.9949 7.60434 4.12424 7.73325L6.41997 10.0451Z" fill="#F4F2EF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 670 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.15595 15.6813L19.0211 5.81607C19.2539 5.58326 19.5256 5.46686 19.836 5.46686C20.1464 5.46686 20.418 5.58326 20.6508 5.81607C20.8836 6.04888 21 6.32553 21 6.64602C21 6.96652 20.8836 7.24279 20.6508 7.47482L9.97077 18.1839C9.73797 18.4167 9.46636 18.5331 9.15595 18.5331C8.84554 18.5331 8.57393 18.4167 8.34113 18.1839L3.33578 13.1786C3.10297 12.9458 2.99122 12.6695 3.00054 12.3498C3.00985 12.0301 3.1313 11.7534 3.36488 11.5198C3.59846 11.2863 3.87512 11.1698 4.19484 11.1706C4.51456 11.1714 4.79082 11.2878 5.02363 11.5198L9.15595 15.6813Z" fill="#F4F2EF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 674 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.8919 21.3174L26.1416 7.06765C26.4779 6.73137 26.8702 6.56323 27.3186 6.56323C27.767 6.56323 28.1593 6.73137 28.4956 7.06765C28.8319 7.40392 29 7.80353 29 8.26647C29 8.72941 28.8319 9.12846 28.4956 9.46362L13.0689 24.9323C12.7326 25.2686 12.3403 25.4368 11.8919 25.4368C11.4436 25.4368 11.0512 25.2686 10.715 24.9323L3.48501 17.7024C3.14874 17.3661 2.98732 16.9671 3.00078 16.5052C3.01423 16.0434 3.18965 15.6438 3.52705 15.3064C3.86445 14.969 4.26406 14.8009 4.72588 14.802C5.18769 14.8031 5.58674 14.9713 5.92302 15.3064L11.8919 21.3174Z" fill="#F4F2EF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 673 B |
Reference in New Issue
Block a user