prestashop-icons/README.md

# PrestaShop Icons

Semantic icon helper for PrestaShop modules.

```php
MprIcons::get('account');  // Just works
```

## How It Works

- **Admin**: Uses Material Icons (auto-detected)
- **Front**: Reads from `ps_mpr_config` table, defaults to Font Awesome

## Setup (Module Install)

Call `init()` from your module's install method:

```php
public function install()
{
    MprIcons::init();  // Creates config table, detects theme icons
    return parent::install();
}
```

This will:
1. Create `ps_mpr_config` table if it doesn't exist
2. Detect theme icon set (checks theme.yml, assets for Material)
3. Save the detected preference

## PHP

```php
use MyPrestaRocks\Icons\MprIcons;

// Just call get() - it figures out the rest
echo MprIcons::get('account');
echo MprIcons::get('cart');
echo MprIcons::get('success', 'text-green');  // With extra class

// Get raw class/name (no HTML)
$class = MprIcons::raw('edit');  // 'fa fa-pencil' or 'edit'
```

## JavaScript

Include the script and set icon set from PHP:

```php
// In your module
$this->context->controller->addJS($this->getLocalPath() . 'vendor/myprestarocks/prestashop-icons/js/mpr-icons.js');
Media::addJsDef(['mprIconSet' => MprIcons::getIconSet()]);
```

```javascript
MprIcons.get('account');              // HTML string
MprIcons.create('warning');           // DOM element
MprIcons.raw('edit');                 // Class/name only
```

## Configuration

Front office icon set is stored in `ps_mpr_config`:
- module: `mpr_global`
- key: `front_icon_set`
- value: `fontawesome` or `material`

```php
// Save preference
MprIcons::saveIconSet('material');
```

## Available Icons

| Name | Font Awesome | Material |
|------|--------------|----------|
| `account` | `fa fa-user` | `person` |
| `cart` | `fa fa-shopping-cart` | `shopping_cart` |
| `orders` | `fa fa-list` | `receipt_long` |
| `success` | `fa fa-check` | `check` |
| `error` | `fa fa-times` | `close` |
| `warning` | `fa fa-exclamation-triangle` | `warning` |
| `info` | `fa fa-info-circle` | `info` |
| `edit` | `fa fa-pencil` | `edit` |
| `delete` | `fa fa-trash` | `delete` |
| `search` | `fa fa-search` | `search` |
| `settings` | `fa fa-cog` | `settings` |
| `email` | `fa fa-envelope` | `email` |
| `phone` | `fa fa-phone` | `phone` |
| `lock` | `fa fa-lock` | `lock` |
| `logout` | `fa fa-sign-out` | `logout` |
| `home` | `fa fa-home` | `home` |
| `address` | `fa fa-map-marker` | `location_on` |
| `truck` | `fa fa-truck` | `local_shipping` |
| `credit-card` | `fa fa-credit-card` | `credit_card` |
| `calendar` | `fa fa-calendar` | `calendar_today` |
| `heart` | `fa fa-heart` | `favorite` |
| `star` | `fa fa-star` | `star` |
| `eye` | `fa fa-eye` | `visibility` |
| `eye-off` | `fa fa-eye-slash` | `visibility_off` |
| `close` | `fa fa-times` | `close` |
| `check` | `fa fa-check` | `check` |
| `plus` | `fa fa-plus` | `add` |
| `minus` | `fa fa-minus` | `remove` |
| `chevron-*` | `fa fa-chevron-*` | `chevron_*` |
| `arrow-*` | `fa fa-arrow-*` | `arrow_*` |
| `download` | `fa fa-download` | `download` |
| `upload` | `fa fa-upload` | `upload` |
| `refresh` | `fa fa-refresh` | `refresh` |
| `spinner` | `fa fa-spinner fa-spin` | `hourglass_empty` |
| `loading` | `fa fa-circle-o-notch fa-spin` | `autorenew` |

Full list: `MprIcons::list()`

## SVG Sprites

For brand icons (payments, social), use the included SVG sprites. One request, multiple icons.

### Payment Icons

Include sprite once (hidden), use anywhere:

```html
<!-- In your template head or hidden container -->
{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/payments.svg"}

<!-- Use icons -->
<svg width="38" height="24"><use href="#visa"/></svg>
<svg width="38" height="24"><use href="#mastercard"/></svg>
<svg width="38" height="24"><use href="#paypal"/></svg>
```

Available: `visa`, `mastercard`, `amex`, `paypal`, `stripe`, `applepay`, `googlepay`, `klarna`, `ideal`, `bancontact`, `sepa`, `card`

### Social Icons

```html
{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/socials.svg"}

<svg width="24" height="24"><use href="#facebook"/></svg>
<svg width="24" height="24"><use href="#instagram"/></svg>
<svg width="24" height="24"><use href="#twitter"/></svg>
```

Available: `facebook`, `twitter`, `instagram`, `linkedin`, `youtube`, `tiktok`, `pinterest`, `whatsapp`, `telegram`, `email-social`, `share`

### Styling SVG Sprites

```css
/* Size */
svg { width: 40px; height: 25px; }

/* Or use classes */
.payment-icon { width: 40px; height: 25px; }
.social-icon { width: 24px; height: 24px; }
```

## License

MIT