Icon System

89 SVG icons across 6 categories. Zero external dependencies. Automatic dark mode.

⚡ Quick Usage

Icons use stroke="currentColor" so they automatically inherit text color and work in both light and dark mode.

Usage Type	Code Snippet
Basic	`<MallIcon name="actions/heart" />`
With Size	`<MallIcon name="nav/search" size={18} />`
With Class	`<MallIcon name="status/loader" class="spin" />`

IMPORTANT

Import: import MallIcon from '$mall/icons/MallIcon.svelte';

🎨 Icon Gallery

[[Demo:IconGallery]]

🛠 Customization Workflow

The MallIcon component loads SVGs via import.meta.glob, making icon customization a simple file swap.

1. Direct Inkscape Editing

Open any existing icon directly from your terminal:

inkscape src/mall/icons/commerce/shopping-cart.svg

Unreal Hot-Reload: As soon as you hit Save in Inkscape, Vite detects the change and hot-reloads the icon in your browser instantly.

2. Design on the 24×24 Grid

Viewbox: 0 0 24 24
Stroke: currentColor — enables dark mode
Fill: none (brand icons may use fill="currentColor")
Stroke width: 1.5px default

3. Save as Plain SVG

In Inkscape: File → Save As → Plain SVG (not Inkscape SVG).

✨ Mall Brand Identity Tips

Rounded Terminals: Softer line caps (round) for a friendlier feel.
Subtle M Motif: Incorporate the Mallnline "M" into hero icons.
Consistent Weight: Keep 1.5px stroke for UI icons.

📁 File Structure

src/mall/icons/
├── MallIcon.svelte       ← Component
├── actions/              ← 25 icons
├── brand/                ← 10 icons
├── commerce/             ←  5 icons
├── content/              ← 28 icons
├── nav/                  ← 12 icons
└── status/               ←  8 icons