# IconNode

SVG icon node. Render inline SVG từ raw string hoặc URL.

## Resolved name

`Icon`

## Configurable props

### Top-level props

| Prop     | Type     | Description                                       |
| -------- | -------- | ------------------------------------------------- |
| `source` | `string` | Raw SVG string hoặc URL tới file SVG              |
| `size`   | `number` | Kích thước icon (px) — set cả `width` và `height` |

`size` hỗ trợ responsive: `size={24}` xs, `md={{ size: 32 }}` desktop.

### `sx` props

```ts
sx?: {
  // color (áp dụng toàn breakpoint — không responsive)
  color?: string

  // spacing
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { IconNode } from '@janbox/storefront-builder';

// Icon từ raw SVG
<IconNode
  source='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="..."/></svg>'
  size={24}
  sx={{ color: '#333333' }}
/>

// Responsive size
<IconNode
  source="https://example.com/icon.svg"
  size={20}
  md={{ size: 28 }}
  sx={{ color: '#fa8c16' }}
/>

// Icon với border radius tròn
<IconNode
  source='<svg>...</svg>'
  size={16}
  sx={{
    color: '#ffffff',
    borderTopLeftRadius: 9999,
    borderTopRightRadius: 9999,
    borderBottomLeftRadius: 9999,
    borderBottomRightRadius: 9999,
  }}
/>
```

## Rules

- **Canvas**: no — không chứa node con.
- `source` bắt buộc phải có — nếu không có, icon sẽ không hiển thị.