myprestarocks
19a7fe06a8
Payment sprites (16 files, 38 brands each): - Shapes: icon, square, rectangle, text-only - Modes: lm (light), dm (dark), la (light-accent), da (dark-accent) Social sprites (12 files, 11-12 brands each): - Shapes: icon, full-logo, text-only - Same 4 color modes Includes build-sprites.php to regenerate from source materials. Updated README with complete documentation. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
233 lines
7.1 KiB
Markdown
233 lines
7.1 KiB
Markdown
# 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.
|
||
|
||
### Sprite Structure
|
||
|
||
```
|
||
sprites/
|
||
├── payments/
|
||
│ ├── icon-lm.svg # Logo mark, light mode
|
||
│ ├── icon-dm.svg # Logo mark, dark mode
|
||
│ ├── icon-la.svg # Logo mark, light accent
|
||
│ ├── icon-da.svg # Logo mark, dark accent
|
||
│ ├── square-lm.svg # Square format, light mode
|
||
│ ├── square-dm.svg # Square format, dark mode
|
||
│ ├── square-la.svg # Square format, light accent
|
||
│ ├── square-da.svg # Square format, dark accent
|
||
│ ├── rectangle-lm.svg # Button shape, light mode
|
||
│ ├── rectangle-dm.svg # Button shape, dark mode
|
||
│ ├── rectangle-la.svg # Button shape, light accent
|
||
│ ├── rectangle-da.svg # Button shape, dark accent
|
||
│ ├── text-only-lm.svg # Text only, light mode
|
||
│ ├── text-only-dm.svg # Text only, dark mode
|
||
│ ├── text-only-la.svg # Text only, light accent
|
||
│ └── text-only-da.svg # Text only, dark accent
|
||
└── socials/
|
||
├── icon-lm.svg
|
||
├── icon-dm.svg
|
||
├── icon-la.svg
|
||
├── icon-da.svg
|
||
├── full-logo-lm.svg
|
||
├── full-logo-dm.svg
|
||
├── full-logo-la.svg
|
||
├── full-logo-da.svg
|
||
├── text-only-lm.svg
|
||
├── text-only-dm.svg
|
||
├── text-only-la.svg
|
||
└── text-only-da.svg
|
||
```
|
||
|
||
### Variants Explained
|
||
|
||
| Suffix | Mode | Use Case |
|
||
|--------|------|----------|
|
||
| `-lm` | Light Mode | Dark icons for light backgrounds |
|
||
| `-dm` | Dark Mode | White icons for dark backgrounds |
|
||
| `-la` | Light Accent | Brand colors on light backgrounds |
|
||
| `-da` | Dark Accent | Brand colors on dark backgrounds |
|
||
|
||
| Shape | Description | Typical Size |
|
||
|-------|-------------|--------------|
|
||
| `icon` | Logo mark only | 24×24, 32×32 |
|
||
| `square` | Square with padding | 45×45 |
|
||
| `rectangle` | Card/button shape | 60×38 |
|
||
| `text-only` | Brand name text | varies |
|
||
| `full-logo` | Logo + brand name (socials) | varies |
|
||
|
||
### Payment Icons
|
||
|
||
Copy the sprite you need to your module, include once, use anywhere:
|
||
|
||
```php
|
||
// In module install or build step
|
||
copy(
|
||
_PS_MODULE_DIR_ . 'yourmodule/vendor/myprestarocks/prestashop-icons/sprites/payments/square-lm.svg',
|
||
_PS_MODULE_DIR_ . 'yourmodule/views/img/payments.svg'
|
||
);
|
||
```
|
||
|
||
```html
|
||
<!-- Include sprite (hidden) -->
|
||
{include file="module:yourmodule/views/img/payments.svg"}
|
||
|
||
<!-- Use icons -->
|
||
<svg width="45" height="45"><use href="#visa_lm"/></svg>
|
||
<svg width="45" height="45"><use href="#mastercard_lm"/></svg>
|
||
<svg width="45" height="45"><use href="#paypal_lm"/></svg>
|
||
```
|
||
|
||
**Available payment brands (38):**
|
||
|
||
afterpay, alipay, alma, amazon_pay, american_express, apple_pay, bacs, bancontact, bank, Billie, blik, cartes_bancaires, cod, credit_pay, eps, google_pay, ideal, jcb, kakao_pay, klarna, link, mastercard, mobilepay, multibanco, naverpay, p24, payco, paypal, pickup, point_of_sale, revolut, samsung_pay, satispay, sepa, twint, unionpay, visa, wechat_pay
|
||
|
||
### Social Icons
|
||
|
||
```html
|
||
{include file="module:yourmodule/views/img/socials.svg"}
|
||
|
||
<svg width="24" height="24"><use href="#facebook_lm"/></svg>
|
||
<svg width="24" height="24"><use href="#x_lm"/></svg>
|
||
<svg width="24" height="24"><use href="#instagram_lm"/></svg>
|
||
```
|
||
|
||
**Available social brands (12):**
|
||
|
||
amazon, apple, facebook, google, LinkedIn, microsoft, outlook, paypal, reddit, tiktok, x, yahoo
|
||
|
||
### Icon ID Format
|
||
|
||
Icon IDs follow the pattern: `{brand}_{mode}`
|
||
|
||
Examples:
|
||
- `visa_lm` - Visa, light mode
|
||
- `visa_dm` - Visa, dark mode
|
||
- `paypal_la` - PayPal, light accent
|
||
- `facebook_da` - Facebook, dark accent
|
||
|
||
### Styling
|
||
|
||
```css
|
||
.payment-icon { width: 45px; height: 45px; }
|
||
.payment-icon-rect { width: 60px; height: 38px; }
|
||
.social-icon { width: 24px; height: 24px; }
|
||
```
|
||
|
||
## License
|
||
|
||
MIT
|