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 code16 from './svgs/code-16.svg?raw';
|
||||
import code24 from './svgs/code-24.svg?raw';
|
||||
import code32 from './svgs/code-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 = code16;
|
||||
else if (size === 24) raw = code24;
|
||||
else if (size === 32) raw = code32;
|
||||
else raw = '';
|
||||
|
||||
const classes = ['nds-icon-code', 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.22222 5.77778L3 8L5.22222 10.2222M10.7778 5.77778L13 8L10.7778 10.2222M9.11111 3.55556L6.88889 12.4444" stroke="#F4F2EF" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 285 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="M7 8L3 12L7 16M17 8L21 12L17 16M14 4L10 20" stroke="#F4F2EF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 239 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="M8.77778 10.2222L3 16L8.77778 21.7778M23.2222 10.2222L29 16L23.2222 21.7778M18.8889 4.44444L13.1111 27.5556" stroke="#F4F2EF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 304 B |
Reference in New Issue
Block a user