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 bin16 from './svgs/bin-16.svg?raw';
|
||||
import bin24 from './svgs/bin-24.svg?raw';
|
||||
import bin32 from './svgs/bin-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 = bin16;
|
||||
else if (size === 24) raw = bin24;
|
||||
else if (size === 32) raw = bin32;
|
||||
else raw = '';
|
||||
|
||||
const classes = ['nds-icon-bin', 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="M5.22223 13C4.91667 13 4.65519 12.8913 4.43778 12.6739C4.22037 12.4565 4.11149 12.1948 4.11111 11.8889V4.66667C3.95371 4.66667 3.82186 4.61333 3.71556 4.50667C3.60926 4.4 3.55593 4.26815 3.55556 4.11111C3.55519 3.95407 3.60852 3.82222 3.71556 3.71556C3.8226 3.60889 3.95445 3.55556 4.11111 3.55556H6.33334C6.33334 3.39815 6.38667 3.2663 6.49334 3.16C6.6 3.0537 6.73186 3.00037 6.88889 3H9.11111C9.26852 3 9.40056 3.05333 9.50723 3.16C9.61389 3.26667 9.66704 3.39852 9.66667 3.55556H11.8889C12.0463 3.55556 12.1783 3.60889 12.285 3.71556C12.3917 3.82222 12.4448 3.95407 12.4444 4.11111C12.4441 4.26815 12.3907 4.40018 12.2844 4.50722C12.1782 4.61426 12.0463 4.66741 11.8889 4.66667V11.8889C11.8889 12.1944 11.7802 12.4561 11.5628 12.6739C11.3454 12.8917 11.0837 13.0004 10.7778 13H5.22223ZM7.285 10.6178C7.3913 10.5119 7.44445 10.38 7.44445 10.2222V6.33333C7.44445 6.17593 7.39111 6.04407 7.28445 5.93778C7.17778 5.83148 7.04593 5.77815 6.88889 5.77778C6.73186 5.77741 6.6 5.83074 6.49334 5.93778C6.38667 6.04481 6.33334 6.17667 6.33334 6.33333V10.2222C6.33334 10.3796 6.38667 10.5117 6.49334 10.6183C6.6 10.725 6.73186 10.7781 6.88889 10.7778C7.04593 10.7774 7.17797 10.7241 7.285 10.6178ZM9.50723 10.6178C9.61352 10.5119 9.66667 10.38 9.66667 10.2222V6.33333C9.66667 6.17593 9.61334 6.04407 9.50667 5.93778C9.4 5.83148 9.26815 5.77815 9.11111 5.77778C8.95408 5.77741 8.82223 5.83074 8.71556 5.93778C8.60889 6.04481 8.55556 6.17667 8.55556 6.33333V10.2222C8.55556 10.3796 8.60889 10.5117 8.71556 10.6183C8.82223 10.725 8.95408 10.7781 9.11111 10.7778C9.26815 10.7774 9.40019 10.7241 9.50723 10.6178Z" fill="#F4F2EF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -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="M7 21C6.45 21 5.97934 20.8043 5.588 20.413C5.19667 20.0217 5.00067 19.5507 5 19V6C4.71667 6 4.47934 5.904 4.288 5.712C4.09667 5.52 4.00067 5.28267 4 5C3.99934 4.71733 4.09534 4.48 4.288 4.288C4.48067 4.096 4.718 4 5 4H9C9 3.71667 9.096 3.47933 9.288 3.288C9.48 3.09667 9.71734 3.00067 10 3H14C14.2833 3 14.521 3.096 14.713 3.288C14.905 3.48 15.0007 3.71733 15 4H19C19.2833 4 19.521 4.096 19.713 4.288C19.905 4.48 20.0007 4.71733 20 5C19.9993 5.28267 19.9033 5.52033 19.712 5.713C19.5207 5.90567 19.2833 6.00133 19 6V19C19 19.55 18.8043 20.021 18.413 20.413C18.0217 20.805 17.5507 21.0007 17 21H7ZM10.713 16.712C10.9043 16.5213 11 16.284 11 16V9C11 8.71667 10.904 8.47933 10.712 8.288C10.52 8.09667 10.2827 8.00067 10 8C9.71734 7.99933 9.48 8.09533 9.288 8.288C9.096 8.48067 9 8.718 9 9V16C9 16.2833 9.096 16.521 9.288 16.713C9.48 16.905 9.71734 17.0007 10 17C10.2827 16.9993 10.5203 16.9033 10.713 16.712ZM14.713 16.712C14.9043 16.5213 15 16.284 15 16V9C15 8.71667 14.904 8.47933 14.712 8.288C14.52 8.09667 14.2827 8.00067 14 8C13.7173 7.99933 13.48 8.09533 13.288 8.288C13.096 8.48067 13 8.718 13 9V16C13 16.2833 13.096 16.521 13.288 16.713C13.48 16.905 13.7173 17.0007 14 17C14.2827 16.9993 14.5203 16.9033 14.713 16.712Z" fill="#F4F2EF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -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="M8.77778 29C7.98334 29 7.30348 28.7174 6.73822 28.1521C6.17297 27.5868 5.88985 26.9065 5.88889 26.1111V7.33333C5.47963 7.33333 5.13682 7.19467 4.86045 6.91733C4.58408 6.64 4.44541 6.29718 4.44445 5.88889C4.44348 5.48059 4.58215 5.13778 4.86045 4.86044C5.13874 4.58311 5.48156 4.44444 5.88889 4.44444H11.6667C11.6667 4.03519 11.8053 3.69237 12.0827 3.416C12.36 3.13963 12.7028 3.00096 13.1111 3H18.8889C19.2981 3 19.6414 3.13867 19.9188 3.416C20.1961 3.69333 20.3343 4.03615 20.3333 4.44444H26.1111C26.5204 4.44444 26.8637 4.58311 27.141 4.86044C27.4183 5.13778 27.5565 5.48059 27.5556 5.88889C27.5546 6.29718 27.4159 6.64048 27.1396 6.91878C26.8632 7.19707 26.5204 7.33526 26.1111 7.33333V26.1111C26.1111 26.9056 25.8285 27.5859 25.2632 28.1521C24.698 28.7183 24.0176 29.001 23.2222 29H8.77778ZM14.141 22.8062C14.4174 22.5308 14.5556 22.188 14.5556 21.7778V11.6667C14.5556 11.2574 14.4169 10.9146 14.1396 10.6382C13.8622 10.3619 13.5194 10.2232 13.1111 10.2222C12.7028 10.2213 12.36 10.3599 12.0827 10.6382C11.8053 10.9165 11.6667 11.2593 11.6667 11.6667V21.7778C11.6667 22.187 11.8053 22.5303 12.0827 22.8077C12.36 23.085 12.7028 23.2232 13.1111 23.2222C13.5194 23.2213 13.8627 23.0826 14.141 22.8062ZM19.9188 22.8062C20.1951 22.5308 20.3333 22.188 20.3333 21.7778V11.6667C20.3333 11.2574 20.1947 10.9146 19.9173 10.6382C19.64 10.3619 19.2972 10.2232 18.8889 10.2222C18.4806 10.2213 18.1378 10.3599 17.8604 10.6382C17.5831 10.9165 17.4444 11.2593 17.4444 11.6667V21.7778C17.4444 22.187 17.5831 22.5303 17.8604 22.8077C18.1378 23.085 18.4806 23.2232 18.8889 23.2222C19.2972 23.2213 19.6405 23.0826 19.9188 22.8062Z" fill="#F4F2EF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Reference in New Issue
Block a user