Files

myprestarocks 4b2a9f7138 Update payment icons to match template naming convention

- Renamed all icon IDs to use -color suffix (visa-color, mastercard-color, etc.)
- Changed underscore naming for multi-word icons (apple_pay-color, google_pay-color, etc.)
- Added missing icons: discover, jcb, unionpay, affirm, afterpay
- Now contains 27 payment icons matching actual template usage
- Updated README with categorized icon list

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-26 14:45:40 +00:00

5.0 KiB

Raw Blame History

PrestaShop Icons

Semantic icon helper for PrestaShop modules.

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:

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

This will:

Create ps_mpr_config table if it doesn't exist
Detect theme icon set (checks theme.yml, assets for Material)
Save the detected preference

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:

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

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

// 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:

<!-- 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-color"/></svg>
<svg width="38" height="24"><use href="#mastercard-color"/></svg>
<svg width="38" height="24"><use href="#paypal-color"/></svg>

Available (27 icons):

Card Networks	Wallets	BNPL	Regional
`visa-color`	`paypal-color`	`klarna-color`	`ideal-color`
`mastercard-color`	`apple_pay-color`	`alma-color`	`bancontact-color`
`american_express-color`	`google_pay-color`	`affirm-color`	`blik-color`
`discover-color`	`samsung_pay-color`	`afterpay-color`	`eps-color`
`jcb-color`	`revolut-color`		`multibanco-color`
`unionpay-color`	`alipay-color`		`p24-color`
`card-color`	`wechat_pay-color`		`sepa-color`
	`satispay-color`		`twint-color`
	`mobilepay-color`
	`link-color`
	`stripe-color`

{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

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

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

License

MIT

5.0 KiB Raw Blame History