# Channel Orders — Platform Icons
## Where the icons live
Icons are stored in **two locations**:
### 1. Source files (for reference / editing)
```
plugins/webkul/channels/resources/icons/platforms/ ← large icons (light mode)
plugins/webkul/channels/resources/icons/platforms/dark/ ← large icons (dark mode)
plugins/webkul/channels/resources/icons/platforms/small/ ← small icons (compact table use)
```
### 2. Public assets (what the browser actually loads)
```
public/vendor/channels/platforms/ ← large icons (light mode) — used in Channel Orders list
public/vendor/channels/platforms/dark/ ← large icons (dark mode)
public/vendor/channels/platforms/small/ ← small icons — used in Inventory Products channels column
```
**Size guide:**
| Folder | Rendered size | Used in |
|--------|--------------|---------|
| `platforms/` | 64×64 px | Channel Orders list |
| `platforms/small/` | 20×20 px | Inventory Products → Channels column |
Each file is named after the platform it represents:
| File | Platform |
|------|----------|
| `shopify.svg` | Shopify channels |
| `ebay.svg` | eBay channels |
| `amazon.svg` | Amazon channels |
| `woocommerce.svg` | WooCommerce channels |
| `manual.svg` | Manual / fallback (used when no match is found) |
---
## ⚠️ IMPORTANT — Copy to public after every edit
**Editing the source files alone has no effect.** The browser loads icons from the `public/` folder only.
After editing any icon, copy it to the matching public path:
```bash
# Light mode icon
cp plugins/webkul/channels/resources/icons/platforms/shopify.svg \
public/vendor/channels/platforms/shopify.svg
# Dark mode icon
cp plugins/webkul/channels/resources/icons/platforms/dark/shopify.svg \
public/vendor/channels/platforms/dark/shopify.svg
```
> This was the cause of a confusing bug where the dark theme icon appeared not to switch — the JS switching was working correctly, but both the light and dark public files were identical because the updated source had never been copied across.
---
## Light vs Dark mode switching
The application supports light/dark theme switching. A JavaScript `setInterval` (runs every 250ms) checks whether the `` element has the `dark` class and swaps the icon `src` accordingly:
- **Light mode:** loads from `/vendor/channels/platforms/{slug}.svg`
- **Dark mode:** loads from `/vendor/channels/platforms/dark/{slug}.svg`
The script is registered in `app/Providers/Filament/AdminPanelProvider.php` via `PanelsRenderHook::BODY_END`. It selects icons using `img[src*="vendor/channels/platforms"]` — this works even if Filament's HTML sanitizer strips custom `class` or `alt` attributes from the table column HTML.
### Which icons have separate dark variants?
| Icon | Dark variant different? | Notes |
|------|------------------------|-------|
| `shopify.svg` | No — same file | Green bag icon with white "S" — solid background works on both themes |
| `ebay.svg` | **Yes** | Dark version adds a `#374151` background (transparent bg in light) |
| `amazon.svg` | No — same file | Orange background works on both themes |
| `woocommerce.svg` | No — same file | Purple background works on both themes |
| `manual.svg` | No — same file | Grey background works on both themes |
---
## How icons are loaded (PHP)
Icons are served as URL-based public assets and used in **two places**:
### 1. Channel Orders list
The `$platformIcon` closure in `plugins/webkul/channel-orders/src/Filament/Resources/OrderResource.php` builds an `` tag pointing to the light-mode public path. The JS then swaps to the dark path when needed.
### 2. Inventory Products list (Channels column)
`plugins/webkul/inventories/src/Filament/Clusters/Products/Resources/ProductResource.php` — the `channels_display` column uses the same icon files, rendered at **20×20px** beside the channel selling price. Falls back to `manual.svg` if the platform file doesn't exist.
The platform slug comes from `$channel->platform` (string or backed enum) — this must match the filename exactly (lowercase, no spaces). If no matching file exists, `manual.svg` is used as the fallback.
---
## Adding a new platform icon
1. Create the large light SVG in `plugins/webkul/channels/resources/icons/platforms/newplatform.svg`
2. Create the large dark SVG in `plugins/webkul/channels/resources/icons/platforms/dark/newplatform.svg`
- If the icon looks fine on both themes, copy the same file
3. Create the small SVG (compact/badge version) in `plugins/webkul/channels/resources/icons/platforms/small/newplatform.svg`
4. **Copy all to the public folder:**
```bash
cp plugins/webkul/channels/resources/icons/platforms/newplatform.svg \
public/vendor/channels/platforms/newplatform.svg
cp plugins/webkul/channels/resources/icons/platforms/dark/newplatform.svg \
public/vendor/channels/platforms/dark/newplatform.svg
cp plugins/webkul/channels/resources/icons/platforms/small/newplatform.svg \
public/vendor/channels/platforms/small/newplatform.svg
```
5. No PHP changes required — both locations pick it up automatically via the platform slug
---
## Recommended icon sizes and style
| Property | Recommended value |
|----------|-------------------|
| viewBox | `0 0 24 24` (square icons) |
| Canvas size | 24 x 24 |
| Corner radius | `rx="4"` on background rect |
| Display size | Rendered at 64 x 64 px in the table |
| eBay exception | Rendered at 128 x 64 px (wider viewBox `0 0 40 20`) |
**Design guidelines:**
- Use a solid coloured rounded-square background (``)
- Place a white icon or logo mark on top (`fill="#fff"`) for light mode
- For dark mode, invert colours where needed (e.g. dark text on light/transparent background)
- Icons with transparent backgrounds **must** have a visually different dark variant
---
## Example SVG template (opaque bg — same file for both themes)
```xml
```
## Example dark variant (for transparent-background icons like eBay)
```xml
```